[英]can you pass a component through props to children
您可以通过道具将组件传递给孩子吗
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>
);
}
您可以这样做:
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/
是的,您可以传递任何值作为prop,包括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}
的花括号)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.