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

【问题标题】：Get body content from custom react component从自定义反应组件获取正文内容
【发布时间】：2021-08-13 06:35:09
【问题描述】：

（对不起，如果这是一个菜鸟问题，我刚开始使用 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 value="foo">Foo</Item>
<Item value="bar">Bar</Item>
<Item value="baz">Baz</Item>

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

【问题讨论】：

props.children 应该在这里工作。阅读更多关于 react 如何组成组件以及如何使用 props.children 引用子组件

标签： javascript reactjs react-component

【解决方案1】：

我对 props.children 所做的简单解释是，它用于在调用组件时显示您在开始和结束标记之间包含的任何内容。

将你的函数组件更改为

function Item(props) {
      return (
        <div>
          {props.children}
        <div>
      );
    }

参考：react's props children

【讨论】：

【解决方案2】：

您可以从props 解构the component children。

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>

其他文档

Destructuring assignment

【讨论】：

【解决方案3】：

我想这应该可行。

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

【讨论】：

【解决方案4】：

@Kirill 我希望这会帮助你?。

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

然后你可以这样调用你的项目：

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

您也可以将其他元素作为子元素传递给您的 Item 组件：

<Item value="foo">
   <p>Foo</p>
</Item>

【讨论】：