React：没有 JSX 的子组件答案

【问题标题】：React: Child Components Without JSXReact：没有 JSX 的子组件
【发布时间】：2019-04-07 13:40:57
【问题描述】：

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

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 子级无效。如果您返回一个组件而不是从渲染中返回，则可能会发生这种情况。要么也许你打算调用这个函数而不是返回它。

【问题讨论】：

我认为你的课程（第一个 sn-p）仍然需要扩展 React.Component。
尝试添加为孩子React.createElement(childComponent)
@MateiRadu sorr 这是一个复制粘贴错误。修复了posr

标签： javascript reactjs

【解决方案1】：

创建元素所需要做的就是将第三个参数作为 React 元素而不是普通参数传递。使用 React.createElement 从 react 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));
  }
}

Working codesandbox

【讨论】：