Javascript 在react.js中将一个组件传递给另一个组件

我有一个基本的页面模板。我有一个index.jsx文件，在其中我将头文件和主包装加载到文档体。页眉和主包装器对于页面布局具有某些属性

'use strict'

var React = require('react')
var Header = require('./Header')
var MainWrapper = require('./MainWrapper')

React.renderComponent(<Header />, document.body)
React.renderComponent(<MainWrapper />, document.body)

“严格使用”
var React=require（'React'）
var Header=需要（“./Header”）
var MainWrapper=require（“./MainWrapper”）
React.renderComponent（，document.body）
React.renderComponent（，document.body）

现在MainWrapper可能包含不同的组件。所以我必须将组件作为参数传递给主包装器

例如：

<MainWrapper component={SearchResults} queryText={this.state.queryText} />

其中SearchResult是一个组件，并且queryText必须可以在SearchResult组件中访问

---

在react中有什么方法可以做到这一点吗。提前感谢：）

在

MainWrapper

中，您可以在

render

方法中使用

cloneWithProps

来设置属性：

var React = require('react/addons');

var MainWrapper = React.createClass({
    // ....

    render: function() {
        return React.addons.cloneWithProps(this.props.component,
                                           {queryText: this.props.queryText});
    }
}

---

您不必将组件作为道具传递，只需在组件内要求并渲染它们即可，例如：

var MainWrapper = React.createClass({
  render: function() {
    var component
    if (someLogic)
      component = <SearchResults queryText={this.props.queryText} />
    return {component}
  }
})

var MainWrapper=React.createClass({
render:function（）{
var分量
if（someLogic）
组件=
返回{component}
}
})

---

我在这里的观点是，您根本不需要将它们作为参数传递，您可能需要它们并在MainWrapper组件内执行呈现逻辑。这可能会降低代码的复杂度和可读性。

您可以将其作为子级传递。通常情况下，包装器组件这样做更有意义

例如：

然后在MainWrappers中渲染：

render() {
    return <div>{ this.props.children }</div>;
}

render（）{
返回{this.props.children}；
}

---

这样，MainWrapper就不需要知道任何关于组件的信息，只需要包装它们

问题是，主包装器可以包含任何组件。在这种情况下是seachResult，所以我不能硬编码it@VamshiKolanu好的，但是您仍然可以在MainWrapper文件中执行逻辑。传递动态组件会增加不必要的复杂性，并很快变得难以理解。有没有更好的方法？。bcos我可能必须将视频显示页面、音频显示页面等组件传递给主包装器。@VamshiKolanu当然可以，但您必须在某个时候执行逻辑。一种常见的方法是绘制你所有的部分，然后根据段塞选择你需要的部分。主包装器上的输出是React.addons.cloneWithProps（this.props.component，）；我不明白你的意思

cloneWithProps

将返回一个组件。“主包装上的输出”是什么意思？当我传递并试图访问主包装中的{this.props.component}时，控制台中出现的错误是“无法读取未定义属性的引用我不确定发生了什么。我不认为组件是一个保留的道具名称。当您使用

MainWrapper的
render
方法时，请在调试器中检查
this.props中的内容
render() {
    return <div>{ this.props.children }</div>;
}