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

Question

我的页面有一个基本模板。我有一个 index.jsx 文件，我在其中将 header 和主要包装器加载到文档正文中。 header 和 main-wrapper 具有页面布局的某些属性

'use strict'

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

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

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

例如:

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

其中 SearchResult 是一个组件，queryText 在 searchResult 组件中必须是可访问的

有没有什么方法可以在 react.js 中做到这一点？提前致谢:)!

Answer 1

您可以将它们作为 child 传递。通常，包装器组件以这种方式执行此操作更有意义。

例如:

<MainWrapper>
    <SearchResults queryText=this.props.queryText />
</MainWrapper>

然后在 MainWrappers 中渲染:

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

这样 MainWrapper 就不需要了解码件的任何信息，它只是包装它们。