「子供」と呼ばれるコンポーネントの小道具を渡すことは安全ですか？

Question

props.childrenのネームスペースを混乱させることなく、children={someArray}をコンポーネントに渡すことはできますか？私はそれを試しました、そして、私は実際に何かを壊すように見えないことに驚いています。それでも、それは非常に悪い考えのようです。私は道路の潜在的な衝突を心配する必要がありますか、または何らかの形でこれに対してReactが保護していますか？

文脈では、リストにアコーディオンスタイルの行を作成するためのHOCを書いています。再利用のために、できるだけシンプルで包括的なものとして継承しています。親子のパラダイムは最も直感的です。

ここでは簡略化されたバージョンです：

function ProductList(props) { 
    return (
    <List> 
     {props.products.map(product => ( 
     <ProductWithVarieties parent={product} children={product.varieties} key={item.id} /> 
    ))} 
    </List> 
) 
} 

function withChildren(ParentComponent, ChildComponent) { 
    return class extends React.Component { 
    // OMMITTED: a constructor, some life cycle hooks, event handlers, etc. 
    render(props) { 
     const renderChildren =() => { 
     return this.props.children.map(child => { 
      return <ChildComponent {...child} key={child.id}/> 
     }) 
     } 
     return (
     <div> 
      <ParentComponent 
      {...this.props.parent} 
      onClick={this.toggleChildren} 
      hasChildren={this.props.children.length > 0} /> 
      { this.state.showChildren ? renderChildren() : null } 
     </div> 
    ) 
    } 
    } 
} 

const ProductWithVarieties = withChildren(ProductComponent, VarietyComponent) 

Answer 1

子供たちが小道具としてそれを渡すために「安全」ですが、standardswiseから、あなたがそれを行うと、むしろ

別の何かそれを呼び出すべきではありません