如何在 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 }) => (
    <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>