將 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
        })}

    </>
}