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从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));
  }
}

MDN tutorial

React：没有JSX的子组件

1 个答案: