javascript - 如何使用 React 子元素创建 <Modal.Title> 等元素

Question

如何使用 React 组件编写这样的代码:

<Modal>
<Modal.Title>test title <Modal.Title>
<Modal.Body>

...body
</Modal.Body>
</Modal>

Answer 1

将子组件(Title、Body)设置为主组件(Modal)的静态成员:

class Modal extends React.Component {
  static Title = ({ children }) => <h2>{children}</h2>;
  static Body = ({ children }) => <section>{children}</section>;

  render() {
    return (
      <div>
        {this.props.children}
      </div>
    );
  }
}

ReactDOM.render(
  (<Modal>
    <Modal.Title>test title </Modal.Title>
      <Modal.Body>

        ...body
    </Modal.Body>
  </Modal>),
  document.getElementById('demo')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="demo"></div>