Javascript React.js 如何在组件内部渲染组件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35969495/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React.js How to render component inside component?
提问by R. Vait
I am stuck. I have several seperate components on seperate files. If I render them in main.jsx like following:
我被困住了。我在单独的文件上有几个单独的组件。如果我在 main.jsx 中渲染它们，如下所示：
ReactDOM.render(<LandingPageBox/>, document.getElementById("page-landing"));
ReactDOM.render(<TopPlayerBox topPlayersData={topPlayersData}/>, document.getElementById("wrapper profile-data-wrapper"));
ReactDOM.render(<RecentGamesBox recentGamesData={recentGamesData}/>, document.getElementById("history wrapper"));
Everything works fine, but I wonder if it is a good practice? Maybe it is possible to do something like there would be only one ReactDom.render like:
一切正常，但我想知道这是否是一个好习惯？也许有可能做一些像只有一个 ReactDom.render 这样的事情：
ReactDOM.render(<LandingPageBox recentGamesData={recentGamesData} topPlayersData={topPlayersData}/>, document.getElementById("page-landing"));
I tried different kinds of variatons of LandingPageBox to somehow include those other two components, but had no luck. They sometimes rendered outside the page and so on. I thought it should look something like this:
我尝试了不同类型的 LandingPageBox 变体以某种方式包含其他两个组件，但没有运气。它们有时会呈现在页面之外等等。我认为它应该是这样的：
import React from 'react';
import RecentGames from '../RecentGames/RecentGames.jsx';
import TopPlayers from '../TopPlayers/TopPlayers.jsx';
import PageTop from './PageTop.jsx';
import PageBottom from './PageBottom.jsx';
class LandingPageBox extends React.Component {
render() {
return (
<body className="page-landing">
<PageTop>
<TopPlayers topPlayersData={this.props.topPlayersData} />
</PageTop>
<PageBottom>
<RecentGames recentGamesData= {this.props.recentGamesData}/>
</PageBottom>
</body>
);
}
}
export default LandingPageBox;
But this code only renders PageTop and PageBottom, without player or game components.
但是这段代码只呈现 PageTop 和 PageBottom，没有播放器或游戏组件。
So my question would be, how to set up LandingPageBox file so that TopPlayers component would render inside PageTop component and RecentGames component would render inside PageBottom component? Thank you.
所以我的问题是，如何设置 LandingPageBox 文件，以便 TopPlayers 组件在 PageTop 组件内呈现，而RecentGames 组件在 PageBottom 组件内呈现？谢谢你。
回答by Nicole
In your example
在你的例子中
return (
<body className="page-landing">
<PageTop>
<TopPlayers topPlayersData={this.props.topPlayersData} />
</PageTop>
<PageBottom>
<RecentGames recentGamesData= {this.props.recentGamesData}/>
</PageBottom>
</body>
);
React will only render the top-level custom components PageTopand PageBottom, as you already found out. The other components (TopPlayersand RecentGames) are nestedwithin those components. What does that mean? React does not just display those nested components because it would not know how to do this. Instead, all rendering must be done by the outer components PageTopand PageBottom. React just passes the nested components to them (PageTopgets TopPlayers, PageBottomgets RecentGames) in this.props.children. Now it is up to the outer componentswhat to do with these nested components. In your example, you would modify the PageTopand PageBottomcomponents to use {this.props.children}to display their nested components in a suitable way.
正如您已经发现的那样，React 只会呈现顶级自定义组件PageTop和PageBottom。其他组件（TopPlayers和RecentGames）嵌套在这些组件中。这意味着什么？React 不只是显示那些嵌套的组件，因为它不知道如何做到这一点。相反，所有渲染都必须由外部组件PageTop和PageBottom. React 只是将嵌套的组件传递给它们（PageTopgets TopPlayers、PageBottomgets RecentGames）this.props.children。现在取决于外部组件如何处理这些嵌套组件。在您的示例中，您将修改PageTop和PageBottom组件以用于{this.props.children}以合适的方式显示其嵌套组件。
回答by Dmitriy Nevzorov
You are right. You can use as many nested components as you want. It's one of the main concepts in react.
You can access them in this.props.children.
Do it like this:
你是对的。您可以根据需要使用任意数量的嵌套组件。它是反应中的主要概念之一。您可以在this.props.children. 像这样做：
var Parent = React.createClass({
render: function() {
return <div>{this.props.children}</div>;
}
});
ReactDOM.render(
<Parent>
<Child/>
<Child/>
</Parent>,
node
);
Read more here - https://facebook.github.io/react/docs/multiple-components.html
在这里阅读更多 - https://facebook.github.io/react/docs/multiple-components.html
And here - http://buildwithreact.com/article/component-children
回答by santosh sutar
Here Car component is inside the another component i.e Garage components. When Garage component in rendering Car component is also renders. Same concept as like one function inside another function.
这里 Car 组件位于另一个组件中，即 Garage 组件。当 Garage 组件在渲染时 Car 组件也被渲染。与另一个函数中的一个函数相同的概念。
class Car extends React.Component {
render() {
return <h2>I am a Car!</h2>;
}
}
class Garage extends React.Component {
render() {
return (
<div>
<h1>Who lives in my Garage?</h1>
<Car />
</div>
);
}
}
ReactDOM.render(<Garage />, document.getElementById('root'));
