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>    }}您可以看到“示例”元素的内容自动作为子属性，但要设置标题，我必须明确设置“标题”属性。理想情况下，我想做的是类似于以下内容：使用示例组件的理想方式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。

Answer 2

该Childrenutils的套装可以为您的情况有帮助。

import { Children } from 'react'

const Sample = ({ title, children }) => {

  let _body, _title

  Children.forEach(children, child => {

    if (child.type === SampleTitle) {

      return _title = child

    }

    if (child.type === SampleBody) {

      return _body = child

    }

  })

  if (!_title) _title = <div className='title'>{title}</div>

  if (!_body) _body = <div className='title'>{children}</div>

  return (

    <div className='panel'>

      {_title}

      {_body}

    </div>

  )

}

const SampleTitle = ({ children }) => <div className='title'>{children}</div>

const SampleBody = ({ children }) => <div className='body'>{children}</div>

Sampe.Title = SampleTitle

Sample.Body = SampleBody

现在您可以通过多种方式使用 Sample：

<Sample title="my title">

  <div>my body</div>

</Sample>

<Sample title="my title">

  <Sample.Body>my body</Sample.Body>

</Sample>

<Sample title="my fallback title">

  <Sample.Title>my overriding title</Sample.Title>

  <Sample.Body>my body</Sample.Body>

</Sample>

Answer 3

在这种情况下，您只需要将相关容器提取到它们自己的组件中：

const Sample = ({children }) => (

    <div className="panel">{children}</div>    

);

const Title = ({children}) => (

    <div className="title">{children}</div>

);

const Body = ({children}) => (

    <div className="body">{children}</div>

);

Sample.Title = Title;

Sample.Body = Body;

另请注意，css 类的正确道具是className.