从自定义反应组件获取正文内容

Question

（抱歉，如果这是一个菜鸟问题，我刚刚开始使用 React 一周，并没有在互联网上找到这个问题的答案）。

我有一个带有两个属性的 React 组件，它将这个属性之一渲染到<p>

function Item({ value, text }) {
  return (
    <div>
      {/* not relevant code here */}
      <p>{text}</p>
    <div>
  );
}

我将其与以下代码一起使用：

<Item text="Foo" value="foo"/>
<Item text="Bar" value="bar"/>
<Item text="Baz" value="baz"/>

但我想这样使用它：

<Item text="Foo" value="foo"/>
<Item text="Bar" value="bar"/>
<Item text="Baz" value="baz"/>

那么如何访问 ReactItem元素的主体以及如何将其传递给属性呢？

Answer 1

您可以解构中的子组件props。

function Item({ value, children }) {
  return <div><p>{children}: {value}</p></div>;
}

function Example() {
  return (
    <div>
      <Item value="foo">Foo</Item>
      <Item value="bar">Bar</Item>
      <Item value="baz">Baz</Item>
    </div>
  );
};

ReactDOM.render(
  <Example />,
  document.getElementById("react")
);

p { color: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

附加文档

• 解构赋值