你能把一个组件通过道具传给孩子吗

can you pass a component through props to children

本文关键字：孩子 组件 一个      更新时间：2024-02-14

您可以通过props将组件传递给子吗

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>
    );
}

是的，您可以将任何值作为道具传递，包括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/

您可以这样做：

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/

相关文章：