他の成分を反応成分に通す

Question

リアクション初心者はここに。

JSON構造をツリーとしてレンダリングできる単純なカテゴリツリーを作成しようとしています。このJSONViewの役割は、JSON構造を認識し、それを階層ツリーに分割することです。また、ツリーのノードはカスタムレンダリングロジックに従って解析され、このパネルに挿入することができます。 これは、JSONViewがデータの解析とリーフでのビューコンポーネントのレンダリングを担当するという意味で、Single Responsibility Principleに準拠しています。ビューコンポーネントは、レンダリングロジックを処理します。私はここJSONViewPanelの子コンポーネントとしてビューコンポーネントを作成することによって、これを達成することができました： http://jsbin.com/tiwijilide/1/edit?js,output

をしかし、私は本当にこのような何かを達成したいと思います：

let x = { 
    "category":["first","second","third","fourth"] 
}; 

class JSONPanel extends React.Component{ 
    constructor(props){ 
     super(props); 
    } 

    render(){ 
     let {data, ...x} = this.props; 
     let dataNodes = data.category.map((category) => { 
     x = Object.assign(x, {text:category}); 
     return (
      <li><Component {...x}/></li> //Component passed as props 
     ) 
     }); 
     return (
     <ul>{dataNodes}</ul> 
    ); 
    } 
    }; 

意図がで渡すことですこのJSONViewに対するReactコンポーネントのサブタイプです。

サブコンポーネントのNodeコンポーネントの子をJSBinリンクのdoneとして作成しなくても可能ですか？

Answer 1

はいそれは可能です：try it!

let x = { 
    "category":["first","second","third","fourth"] 
}; 
class JSONPanel extends React.Component{ 
    constructor(props){ 
     super(props); 
    } 

    render(){ 
     let {data, ...x} = this.props; 
     let Renderer = this.props.renderer.component; 
     let dataNodes = data.category.map((category,rank) => { 
     x = Object.assign(x, {text:category}) 
     return (
      <li key={rank}><Renderer {...this.props.renderer.props} {...x}/></li> 
     ) 
     }); 
     return (
     <ul>{dataNodes}</ul> 
    ); 
    } 
    }; 

class RenderNode extends React.Component{ 
    render(){ 
    return(
     <span className={this.props.will}>{this.props.text}</span> 
    ) 
    } 
} 
var renderer={ 
    component:RenderNode, 
    props:{will:"color-text-green"} 
} 
React.render(<JSONPanel data={x} renderer={renderer}/>, document.getElementById("react-example")); 

コンポーネントが小道具として与えることができ、資本の最初の文字の文字列を介してコールされなければなりません。