将父状态作为 prop 传递给 {children} | 内的所有组件Reactjs

Question

我想授予所有

{children}

组件的访问权限以使用或修改父组件内的状态，这是代码：

父组件：

export function FormStep({ children }) {
  const [activeStep, setActiveStep] = useState(null);

  return (
    <ul
      className={
        "pointer-events-none absolute flex translate-x-[200px] flex-col justify-between gap-7 opacity-0 transition duration-200 ease-in-out"
      }
    >
      {children} //all children here need to access 'activeStep'
    </ul>
  );
}

我希望所有

{children}

组件都能访问

activeStep

状态。

通常我们可以将

activeStep

作为 prop 传递给父级的子级

像这样：

export function FormStep({ children }) {
      const [activeStep, setActiveStep] = useState(null);
    
      return (
        <ul
          className={
            "pointer-events-none absolute flex translate-x-[200px] flex-col justify-between gap-7 opacity-0 transition duration-200 ease-in-out"
          }
        >
          <Child isActive={activeStep}></Child>
        </ul>
      );
    }

我想要相同的结果，但对于

{children}

对象

Answer 1

看看 React.Children 和 React.cloneElement

这应该可以解决问题

export function FormStep({ children }) {
  const [activeStep, setActiveStep] = useState(null);
    
  return (
    <ul
      className="pointer-events-none absolute flex translate-x-[200px] flex-col justify-between gap-7 opacity-0 transition duration-200 ease-in-out"
          }
        >    
         {React.Children.map(children, child => (
           React.cloneElement(child, { activeStep })
         ))}
        </ul>
      );
    }