javascript - ReactJs - 如何在一个组件中使用多个子组件

Question

我首先要说明我是 ReactJs 的新手，可能正在尝试解决一些非常基本的问题。

我有一段带有自定义 HTML 的代码:

示例组件

const Sample = ({ title, children }) => {
    return (
          <div class="panel">
              <div class="title">
                 {title}
              </div>
              <div class="body">
                 {children}
              </div>
           </div>    
     );
};

附带问题 - 上面的正确名称是什么？片段？它看起来不像是一个“组件”，只是在学习 React 的命名约定

利用组件

export default class ExampleComponent extends Component {
    render() {
        return <div class="page-body">
            <div class="row">
                <h1> Page 1 </h1>
                <Sample title={<h1>Some title!</h1>}>
                   <p>This is my sample body!</p>
                </Sample>
            </div>
        </div>
    }
}

---

您可以看到“Sample”元素的内容被自动用作 children 属性，但要设置标题，我必须显式设置“title”属性。我最想做的是类似于下面的事情:

利用示例组件的理想方式

export default class ExampleComponent extends Component {
    render() {
        return <div class="page-body">
            <div class="row">
                <h1> Page 1 </h1>
                <Sample title="Some title!">
                   <Sample.Title>
                       <h1>This is my new way to do a title</h1>
                   </Sample.Title>
                   <Sample.Body>
                       <p>This is my sample body!</p>
                   </Sample.Body>
                </Sample>
            </div>
        </div>
    }
}

我以前对其他人创建的组件使用过这种方法，但现在想自己做，但发现很难找到一个简单的例子来做到这一点。

在此先感谢您的指点!

Answer 1

我想你想要的是 JSX 命名空间？无论哪种方式，您都可以实例化 Sample，然后添加更多组件作为 Sample 的属性(将其视为对象):

import React from "react"

const Sample = ({ children }) => (
  <div className="panel">
      {children}
  </div>    
)


Sample.Title = (props) => <div className="title">{props.children}</div>
Sample.Body = (props) => <div className="body">{props.children}</div>

export default Sample

注意:React 使用 className 而不是 class 因为我们使用的是 JSX。