Question

此问题仅在babel中可重现（使用babel-runtime-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中的(classCallCheck.js:7)。我已经读过这是符合规范的行为，但它确实在babel环境之外工作。

顺便说一下，如果我使用功能无状态组件，它当然可以工作。但我不能保证我的lib的消费者提供这样的组件而不是基于类的组件。

我如何使用babel来解决这个问题？
是否有不同的模式用于通过属性传递组件？我相信将类/类构造函数通过props传递给组件是很常见的做法。

Answer 1

组件可以是函数，也可以是类。如果没有new，就不能调用ES6类，至少是那些符合规范的（这包括native和Babel类）。

这不是问题，因为组件不应该手动实例化。函数和类组件都将由ReactDOM.render：

正确处理

class Bar extends React.Component {
  render() {
    const Component = this.props.component;
    return <Component/>;
  }
}

Answer 2

请尝试使用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')
);

https://codepen.io/anon/pen/QQGQYZ

如何传递一个类扩展React.Component作为属性来呈现它（使用babel）？

2 个答案: