javascript - 如何在 React 中将 Prop 传递给 {children}？

Question

这个问题在这里已经有了答案:





How to pass props to {this.props.children}

(31 个回答)


1年前关闭。




我有一个父组件，它充当其子组件的包装器。如何将 Prop 传递给将使用以下格式呈现的 child ？

import React, { useEffect, useState } from 'react';

const Parent = ({ children }) => {
  const [completeState, setCompleteState] = useState(false);

  useEffect(
    () => {
      /* .. code that runs then sets completeState to true */
    setCompleteState(true);
     }, []
  );

  return (
     <section>
       /* 
          how to pass a 'didComplete' prop to children?
           didComplete={completeState}
       */
       {children} // Child component below would be rendered here with the didComplete prop passed in
    </section>

  )
}

import React from 'react';

const Child = ({ didComplete }) => (<h1>The function completed? {didComplete}</h1>); 

Answer 1

props.children是一个 React 元素，它只不过是一个普通的 JS 对象，它描述了需要在 DOM 中呈现的内容。
为了提供额外的细节，我们需要克隆现有的 React Element 对象并提供额外的细节。
为此，我们可以使用 React.cloneElement用于将附加属性传递给 children 的 API :

return (
     <section>
       {React.cloneElement(children, {didComplete: completeState})}
    </section>
);