React.js 如何在组件内部渲染组件？
[英]React.js How to render component inside component?
问题描述
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.我尝试了不同类型的 LandingPageBox 变体以某种方式包含其他两个组件，但没有运气。 They sometimes rendered outside the page and so on.它们有时会呈现在页面之外等等。 I thought it should look something like this:我认为它应该是这样的：
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?所以我的问题是，如何设置 LandingPageBox 文件，以便 TopPlayers 组件在 PageTop 组件内呈现，而RecentGames 组件在 PageBottom 组件内呈现？ Thank you.谢谢你。
3 个解决方案
解决方案1
46 已采纳 2016-03-13 13:11:10
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 PageTop and PageBottom , as you already found out.反应只会使顶层的自定义组件PageTop和PageBottom ，因为你已经发现了。 The other components ( TopPlayers and RecentGames ) are nested within those components.其他组件（ TopPlayers和RecentGames ）嵌套在这些组件中。 What does that mean?这意味着什么？ React does not just display those nested components because it would not know how to do this. React 不只是显示那些嵌套的组件，因为它不知道如何做到这一点。 Instead, all rendering must be done by the outer components PageTop and PageBottom .相反，所有渲染必须由外部组件来完成PageTop和PageBottom 。 React just passes the nested components to them ( PageTop gets TopPlayers , PageBottom gets RecentGames ) in this.props.children .反应只是通过嵌套组件给他们（ PageTop获得TopPlayers ， PageBottom得到RecentGames ）在this.props.children 。 Now it is up to the outer components what to do with these nested components.现在取决于外部组件如何处理这些嵌套组件。 In your example, you would modify the PageTop and PageBottom components to use {this.props.children} to display their nested components in a suitable way.在你的榜样，你会修改PageTop和PageBottom组件来使用{this.props.children}以合适的方式来显示他们的嵌套组件。
解决方案2
39 2016-03-13 11:25:39
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 .您可以在this.props.children访问它们。 Do it like this:像这样做：
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在这里 - http://buildwithreact.com/article/component-children
解决方案3
1 2019-12-25 15:12:09
Here Car component is inside the another component ie Garage components.这里 Car 组件位于另一个组件中，即 Garage 组件。 When Garage component in rendering Car component is also renders.当 Garage 组件在渲染时 Car 组件也被渲染。 Same concept as like one function inside another function.与另一个函数中的一个函数相同的概念。
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'));
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.