如何将扩展React.Component的类作为属性传递给它(使用babel)？
如何将扩展React.Component的类作为属性传递给它(使用babel)？
提问于 2018-02-07 13:07:51
此问题仅可在babel中复制(使用babel-运行时-6.26.0)。
具有以下结构
class Foo extends React.Component {
// ...
}
class Bar extends React.Component {
render() {
return this.props.component();
}
}
// somewhere:
<Bar component={Foo} />在一般情况下，我工作并为我工作，但是当切换到babel时，我得到了错误消息：TypeError: Cannot call a class as a function in (classCallCheck.js:7)。我读过这是符合规范的行为，但它确实在babel环境之外工作。
顺便说一句，如果我使用功能性无状态组件，当然可以工作。但是，我不能保证我的lib的使用者提供这样一个组件，而不是一个基于类的组件。
- 我怎么才能用babel来解决这个问题呢？
- 是否有不同的模式可用于通过属性传递组件？我相信通过道具将类/类构造函数传递给组件是常见的做法。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-02-07 13:25:47
组件可以是函数，也可以是类。而且ES6类不能在没有new的情况下调用，至少是那些符合规范的类(这包括原生类和Babel类)。
这不是一个问题，因为组件不应该手动实例化。函数和类组件都将由ReactDOM.render正确地处理。
class Bar extends React.Component {
render() {
const Component = this.props.component;
return <Component/>;
}
}Stack Overflow用户
发布于 2018-02-07 13:41:57
尝试使用React.createElement(this.props.component, props)代替。
下面是一个有用的例子：
class Foo extends React.Component {
render() { return "Foo" }
}
class Bar extends React.Component {
render() {
return React.createElement(this.props.component, {})
}
}
ReactDOM.render(
<Bar component={Foo} />,
document.getElementById('root')
);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48673268
复制
相似问题
Eclipse中的多目标模式错误
Eclipse显示错误(无法解析目标)
错误显示“无法连接到目标”
无法将Sony Xperia L C2104连接到eclipse
将SQL Server 2005连接到Eclipse
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
