2016-04-07 3 views
1

はあなたがそのようにこれを行うことができ、子供あなたは

var TaskForm = require('../../../../components/assessment/tasks/TaskForm.react'); 

render: function() { 
    return (
     <div> 
      <div className="row"> 
       <div className="col-xs-12 col-lg-12"> 
        <GroupsItemsAccordionWrapper 
         TaskForm=TaskForm 
        /> 
       </div> 
      </div> 
     </div> 
    ); 
} 
+0

はい、任意の値を小道具として渡すことができます。 – Pavlo

+0

ですが、どうやって正しい方法でやりますか? – morne

答えて

2

はい、あなたはReact.createClassによって返されたオブジェクト(別名コンポーネントクラス)を含め、小道具として任意の値を渡すことができます。あなたが依存性注入を実施していると仮定:

var TaskForm = React.createClass({ 
    render: function() { 
    return (
     <div>{this.props.children}</div> 
    ); 
    } 
}); 

var GroupsItemsAccordionWrapper = React.createClass({ 
    render: function() { 
    var TaskForm = this.props.TaskForm; 
    return (
     <div> 
      <TaskForm>Hello, world!</TaskForm> 
     </div> 
    ); 
    } 
}); 

ReactDOM.render(
    <GroupsItemsAccordionWrapper TaskForm={TaskForm} />, 
    document.getElementById('container') 
); 

TaskForm={TaskForm}周りの中括弧に注意してください)。

デモ:https://jsfiddle.net/69z2wepo/37477/

2

に小道具を通じてコン​​ポーネントを渡すことができます子供たちに小道具を通じてコン​​ポーネントを渡すことができます。

var DivWrapper = React.createClass({ 
    render: function() { 
     return <div>{ this.props.child }</div>; 
    } 
}); 

var Hello = React.createClass({ 
    render: function() { 
     return <div>Hello {this.props.name}</div>; 
    } 
}); 

を//作成するには、コンポーネント

var comp = <Hello name="World" /> 
ReactDOM.render(<DivWrapper child={ comp }/>, document.body); 

{ this.props.child }を使用してコンポーネントをレンダリングします。

012ここ

JSFiddle:https://jsfiddle.net/5c4gg66a/