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

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 value="foo">Foo</Item>
<Item value="bar">Bar</Item>
<Item value="baz">Baz</Item>

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

Answer 1

我想这应该可行。

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

Answer 2

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

将您的函数组件更改为

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

参考：react's props children

Answer 3

@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>

Answer 4

您可以从 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

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

Get body content from custom react component

javascript

reactjs

react-component