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

Question

在这里，我创建了一个组件SomeComponentconst 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 }) => (

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

      {children}

    </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 }) => (

    <div className="some-class">

        { children }

    </div>

);

子元素可以是文本、HTML 或其他 React 组件。