如何连接 React JSX 对象

Question

我想通过调用 super.render() 在 ExtendedComponent 中添加 <p> 标签，问题是我不知道是否可以修改已经定义的 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 中，因为反应元素只能 return 一个元素，而不是它们的列表。 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 应用程序都是以这种方式构建的，而不是基于继承。

希望对您有所帮助！

如何连接 React JSX 对象

How to contatenate React JSX objects

javascript

ecmascript-6

reactjs

react-jsx