如何访问react中无状态功能组件中的props.children?

我们可以在功能组件中使用props.children。它不需要使用基于类的组件。

const FunctionalComponent = props => {
  return (
    <div>
      <div>I am inside functional component.</div>
      {props.children}
    </div>
  );
};

在调用功能组件时,可以执行以下操作-

const NewComponent = props => {
  return (
    <FunctionalComponent>
      <div>this is from new component.</div>
    </FunctionalComponent>
  );
};

希望这能回答你的问题。

除了Ashish的回答之外,您还可以使用以下方法来分解子组件中的“children”属性:

const FunctionalComponent = ({ children }) => {
  return (
    <div>
      <div>I am inside functional component.</div>
      { children }
    </div>
  );
};

这将允许你传递其他你想解构的道具。

const FunctionalComponent = ({ title, content, children }) => {
  return (
    <div>
      <h1>{ title }</h1>
      <div>{ content }</div>
      { children }
    </div>
  );
};

您仍然可以使用“props.title”等来访问这些其他道具,但它不太干净,并且没有定义组件接受的内容。