1

各子要素にいくつかの小道具を選択的に渡し、それぞれのスタイルを設定したいと考えています。

const Burger = ({children, ...rest}) => (
  <>
   <p>I'm a burger...</p>
   {children}
  </>
)
const Meat = ({type}) => <span>with {type?type:'no'} meat</span>
const Sauce = ({flavor}) => <span>with {flavor?flavor:'no'} sauce</span>
const Veggie = ({green}) => <span>with {green?green:'no'} greens</span>

const App = () => (
  // reach-router nesting
  <Router>
    <Burger path='burger' {...props}>
      <Sauce path='sauce' />
      <Veggie path='veggie' />
      <Meat path='meat' />
    </Burger>
  </Router>
)

単純に反復して小道具を各子に渡すことはできないことに気付きました

const Burger = ({children, ...rest}) => (
   <p>I'm a burger... </p>
   {children.map(Child => <Child {...rest} />) } // error
)

render 関数の使用は、 内では機能しません<router>。ネストされたルーティングが壊れ、子の数が不定の場合、子ごとに小道具を手動で入力する必要がありません。

...
  <Router>
    <Burger path='burger' {...props}>
    {someStyle => (
      <>
        <Sauce path='sauce' style={someStyle}/>
        <Veggie path='veggie' style={someStyle}/>
        <Meat path='meat' style={someStyle}/>
      </>
    )}
    </Burger>
  </Router>
...

次に、css-in-js ソリューション (感情) を使用して、各直接の子孫を選択してスタイルを設定しようとしまし<Burger/>たが、これもこの場合はうまくいかないようです。

const styleAllChild = css`
  & > * : {
    margin-bottom: 10px;
  }
`

...
  <Router>
    <Burger path='burger' css={styleAllChild} {...props}>
      <Sauce path='sauce' />
      <Veggie path='veggie' />
      <Meat path='meat' />
    </Burger>
  </Router>
...

最後に、children.map を React.cloneElement と組み合わせて使用​​する解決策は満足のいくものではないことがわかりました。各子が大きすぎるか入れ子になっていると、パフォーマンスに影響するはずだからです。

私が望むものを実装する別の方法はありますか? ありがとうございました。

4

2 に答える 2

0

ピーターの答えを使用して解決しましたが、React.Children代わりに

const Parent = ({children, myProps}) => (
  <>
  ...
  {React.Children.map(children || null, (child, index) => {
    return (
      <child 
        {...child.props}
        key={index}
        myProps={myProps}
        style={someStyle} 
      />
    );
  })}
  ...
  <>
于 2019-12-18T08:37:37.183 に答える