javascript - 如何连接 React JSX 对象

Question

我想添加<p>标签 ExtendedComponent通过调用 super.render() ，问题是我不知道是否可以修改已经定义的 jsx 对象。理想的情况是只写 parentTemplate + <p>Some paragraph</p> ，但这不起作用。

class BaseComponent extends React.Component {
  get title() {
    return 'I am base component';
  }

  render() {
    return <h1>Hello {this.title}</h1>;
  }
}

class ExtendedComponent extends BaseComponent {
  get title() {
    return 'I am extended component';
  }

  render() {
    var parentTemplate = super.render();
    // append <p>Some paragraph</p> to parentTemplate
    return parentTemplate;
  }
}

ReactDOM.render(
  <ExtendedComponent />,       
  document.getElementById('test')
);

Answer 1

就像评论中提到的 azium 一样，这在 React 中并不常见。但是，如果您需要这样做，可以这样完成:

render() {
  var parentTemplate = super.render();
  // append <p>Some paragraph</p> to parentTemplate 
  return <div>{parentTemplate}<p>Some paragraph</p></div>;
}

你必须将它包装在一个div中，因为react元素只能返回一个元素，而不是它们的列表。 parentTemplate 就像任何其他 jsx 一样，但它位于变量中。您可以使用 {variableName} 语法将变量添加到 JSX 中。

另一种方法，更像“ react ”:

class BaseComponent extends React.Component {
  render() {
    return <h1>Hello {this.props.title}</h1>;
  }
}
BaseComponent.propTypes = {
  title: React.PropTypes.string
};
BaseComponent.defaultProps = {
  title: 'I am base component'
};

class ExtendedComponent extends React.Component {
  render() {
    return (
      <div>
        <BaseComponent title="I am extended component"/>
        <p>Some paragraph</p>
      </div>
    );
  }
}

ReactDOM.render(
  <ExtendedComponent />,       
  document.getElementById('test')
);

JSFiddle

这里的ExtendedComponent是一个高阶组件，而不是继承自BaseComponent的组件。大多数时候，这是一个更容易推理的关注点分离，并且大多数 React 应用程序都是以这种方式构建的，而不是基于继承。

希望这有帮助!