你可以通过道具将一个组件传递给孩子吗
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 :(得分: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 }
呈现组件
JSFiddle:https://jsfiddle.net/5c4gg66a/
答案 1 :(得分: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}
周围的大括号。)