javascript 如何将组件添加到 React 中的另一个组件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46761309/
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
How can I add compoent to another component in React?
提问by
How can I add component Country.js to component Countries.js
如何将组件 Country.js 添加到组件 Country.js
I want to display in browser:
我想在浏览器中显示：
Name: France
名称：法国
Capital: Paris
首都：巴黎
Name: Russia
名称：俄罗斯
Capital: Moscow
首都：莫斯科
//First component Country.js
//第一个组件Country.js
import React, { Component } from 'react'
class Country extends Component {
render() {
const {data} = this.props;
return (
<div className = {'countryItem'}>
<p className = {'countryLabel'}>
Name: {{this.props.country.name}}
</p>
<p className= {'contactLabel'}>
Capital: {{this.props.country.capital}}
</p>
</div>
)
return (
<div>
{Country}
</div>
)
}
}
export default Country;
//Second component Countries.js
//第二个组件Countrys.js
import React, { Component } from 'react'
import Country from './Country';
class Countries extends Component {
render() {
const {data} = this.props;
const Countries = data.map(country => {
return (
<li key = {country.id}>
<h2>{country.name}</h2>
<p>{country.capital}</p>
</li>
)
})
return (
<ul>
{Countries}
</ul>
)
}
}
export default Countries;
//Data.js
//数据.js
export default [
{
id: 1,
Name: 'France',
Capital: 'Paris
},
{
id: 2,
Name: 'Russia',
Capital: 'Moscow'
}]
//HTML
//HTML
<body>
<div id="root"></div>
</body>
//App.js
//App.js
import React, {Component} from 'react';
import CountryForm from './components/CountryForm';
import Countries from './components/Countries';
class App extends Component {
render() {
return (
<div>
<div><CountryForm /></div>
<div><Countries data={this.props.data}/></div>
</div>
)
}
}
export default App;
//script.js
//脚本.js
var app = React.createElement(App);
ReactDOM.render(app, document.getElementById('app'));
I want to display in browser:
我想在浏览器中显示：
Name: France
名称：法国
Capital: Paris
首都：巴黎
Name: Russia
名称：俄罗斯
Capital: Moscow
首都：莫斯科
Thank you for your help
谢谢您的帮助
采纳答案by user-developer
You can try the following.
您可以尝试以下操作。
var data = [
{
id: 1,
Name: 'France',
Capital: 'Paris'
},
{
id: 2,
Name: 'Russia',
Capital: 'Moscow'
}];
class Country extends React.Component {
render() {
return (
<div className = 'countryItem'>
<p className = 'countryLabel'>
Name: {this.props.name}
</p>
<p className= {'contactLabel'}>
Capital: {this.props.capital}
</p>
</div>
)
}
}
class Countries extends React.Component {
render() {
const style = {
listStyleType: 'none'
}
const {data} = this.props;
const countries = data.map(country => {
return (
<li key = {country.id}>
<Country name={country.Name} capital={country.Capital}
/>
</li>
)
})
return (
<ul style={style}>
{countries}
</ul>
)
}
}
class App extends React.Component {
render() {
return (
<div>
<div><Countries data={data}/></div>
</div>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
回答by Ben Chan
It would take a bit more code reworking than I can do on the fly, but basically you would want to do something like this in Countries.js:
这需要比我即时完成的更多的代码修改，但基本上你会想要在 Country.js 中做这样的事情：
<li key = {country.id}>
<Country country={country}>
</li>
Hopefully this gives you the info you need to solve the rest of it.
希望这可以为您提供解决其余问题所需的信息。
回答by Chang
In the render function of Countries.js, you should spreadthe countries array when return the result, like this:
在 的render 函数中Countries.js，返回结果的时候应该把countries 数组展开，像这样：
return (
<ul>
{ ...Countries } // you miss the spread operator
</ul>
)
Also, in your example code, you are actually not reusing your Countrycomponent class.
此外，在您的示例代码中，您实际上并没有重用Country组件类。
You should also make it like:
你还应该让它像：
const countries = data.map(country => (
<li id={country.id}>
<Country name={country.name} capital={country.capital}>
</li>
))
And modify your Country.js. Yours is actually so messy.
并修改您的Country.js. 你的实在是太乱了。
Refer to this for a clean explanation about how to compose React components: https://reactjs.org/docs/composition-vs-inheritance.html
有关如何组合 React 组件的清晰解释，请参阅此内容：https: //reactjs.org/docs/composition-vs-inheritance.html
