将 prop 从中间组件传递到 props.children

Question

我想制作一个功能组件，为它的直接子组件提供一个道具。 我不想使用上下文，因为我希望它只对直接的孩子可用。

所以给出以下组件：

const TopLevel = () => {
  return (
    <FooGiver>
      <LowerLevel />
    </FooGiver>
  )
}

interface LowerLevelProps {
  foo?: string;
}
const LowerLevel = ({foo}: LowerLevelProps) => {
  return foo ? <p>{foo}</p> : <p>No foo provided</p> 
}

const FooGiver = ({ children }: FooGiverProps) => {
  const foo = bar // TODO: This should set its children's `foo` prop to "bar"
 
  return (
    <>
      { children }
    </>
  )
}

是否可以定义FooGiver以便它可以给任何它收到"bar"的foo道具的孩子？

如果是这样，我是否需要继续保持foo道具可选，或者 TS 会选择FooGiver将始终设置foo ，而不是抱怨我调用<LowerLevel />而不提供所需的foo道具？

Answer 1

我认为这样做可以为所有孩子添加道具

以下示例组件将一个名为newProp且值为true的新道具添加到它采用的所有子组件。

function Parent({children}){
    return <>

        {children.map(child=>{
            const modified = child;
            modified.props["newProp"] = true;//add new value to prop
            return modified
        })}

    </>
}