如何在 React 中创建带有开始和结束标签的 DOM 组件？

Question

在这里，我创建了一个组件SomeComponent

const SomeComponent = () => (

    <div className={"some-class"}>

        some text here

    </div>

)

我可以像这样使用这个组件：

<SomeComponent text={"here is some text"} />

我想做同样的事情，但有一个开始和结束标签，如下所示：

<SomeComponent>

    here is some text

</SomeComponent>

我怎样才能做到这一点？

Answer 1

您可以访问“内容”作为children属性。const SomeComponent = ({ children }) => (&nbsp; &nbsp; <div className={"some-class"}>&nbsp; &nbsp; &nbsp; {children}&nbsp; &nbsp; </div>)

Answer 2

您可以像这样使用childrenprop ：const SomeComponent = ({ children }) => (    <div className="some-class">        {children}    </div>)你可以这样使用它：<SomeComponent>whatever content here</SomeComponent>childrenprop 不仅仅需要字符串，这些也可以工作：<SomeComponent>  <div>hey</div></SomeComponent><SomeComponent>  {arrayOfComponents}</SomeComponent>

Answer 3

您所需要做的就是寻找children道具。const SomeComponent = ({ children }) => (&nbsp; &nbsp; <div className="some-class">&nbsp; &nbsp; &nbsp; &nbsp; { children }&nbsp; &nbsp; </div>);子元素可以是文本、HTML 或其他 React 组件。