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 }) => (&nbsp; <div className="panel">&nbsp; &nbsp; &nbsp; {children}&nbsp; </div>&nbsp; &nbsp;&nbsp;)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 }) => {&nbsp; let _body, _title&nbsp; Children.forEach(children, child => {&nbsp; &nbsp; if (child.type === SampleTitle) {&nbsp; &nbsp; &nbsp; return _title = child&nbsp; &nbsp; }&nbsp; &nbsp; if (child.type === SampleBody) {&nbsp; &nbsp; &nbsp; return _body = child&nbsp; &nbsp; }&nbsp; })&nbsp; if (!_title) _title = <div className='title'>{title}</div>&nbsp; if (!_body) _body = <div className='title'>{children}</div>&nbsp; return (&nbsp; &nbsp; <div className='panel'>&nbsp; &nbsp; &nbsp; {_title}&nbsp; &nbsp; &nbsp; {_body}&nbsp; &nbsp; </div>&nbsp; )}const SampleTitle = ({ children }) => <div className='title'>{children}</div>const SampleBody = ({ children }) => <div className='body'>{children}</div>Sampe.Title = SampleTitleSample.Body = SampleBody现在您可以通过多种方式使用 Sample：<Sample title="my title">&nbsp; <div>my body</div></Sample><Sample title="my title">&nbsp; <Sample.Body>my body</Sample.Body></Sample><Sample title="my fallback title">&nbsp; <Sample.Title>my overriding title</Sample.Title>&nbsp; <Sample.Body>my body</Sample.Body></Sample>

Answer 3

在这种情况下，您只需要将相关容器提取到它们自己的组件中：const Sample = ({children }) => (&nbsp; &nbsp; <div className="panel">{children}</div>&nbsp; &nbsp;&nbsp;);const Title = ({children}) => (&nbsp; &nbsp; <div className="title">{children}</div>);const Body = ({children}) => (&nbsp; &nbsp; <div className="body">{children}</div>);Sample.Title = Title;Sample.Body = Body;另请注意，css 类的正确道具是className.