React：没有JSX的子组件

Question

我想创建React组件并在不使用JSX情况下向其添加子组件。 我尝试了以下方法：

class ChildComponent extends React.Component {
  render() {
    const template = Object.assign({}, this.state, this.props);
    return React.createElement("p", {}, "hello world");
  }
}

class Component  extends React.Component {
  render() {
    const template = Object.assign({}, this.state, this.props);
    return React.createElement("div", {}, ChildComponent);
  }
}

我也尝试过这个

const childComponent = createReactClass({
  render: function() {
    const template = Object.assign({}, this.state, this.props);
    return React.createElement("p", {}, "hello world");
  }
});

const component = createReactClass({
  render: function() {
    const template = Object.assign({}, this.state, this.props);
    return React.createElement("div", {}, childComponent);
  }
});

我收到这个错误：

警告：函数作为React子函数无效。 如果返回Component而不是render，则可能会发生这种情况。 或许你打算调用这个函数而不是返回它。

Answer 1

创建元素所需要做的就是将第三个参数作为React元素而不是普通参数传递。 利用React.createElement从反应的ChildComonent类中创建一个元素

class ChildComponent extends React.Component {
  render() {
    const template = Object.assign({}, this.state, this.props);
    return React.createElement("p", {}, "hello world");
  }
}

class Component extends React.Component {
  render() {
    const template = Object.assign({}, this.state, this.props);
    return React.createElement("div", {}, React.createElement(ChildComponent));
  }
}

工作代码盒