如何在React中将组件添加到另一个组件中？

Question

如何在React中将组件添加到另一个组件中？

javascriptreactjs

3

如何将组件 Country.js 添加到组件 Countries.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;

//第二个组件 Countries.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

export default  [       
        {
           id: 1,
           Name: 'France',
           Capital: 'Paris
        },
        {
           id: 2,
           Name: 'Russia',
           Capital: 'Moscow'
        }]

//HTML

<body>
    <div id="root"></div>
</body>

//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

var app = React.createElement(App);
ReactDOM.render(app, document.getElementById('app'));

我希望在浏览器中显示：

名称：法国

首都：巴黎

名称：俄罗斯

首都：莫斯科

感谢您的帮助

- user8777652

可能只是打错了吗？你写成了"contact.id"而不是"country.id"。 - Ben Chan

你知道怎么连接吗？应该是'country.id'。 - user8777652

3个回答

0

需要进行比我现在能够做的更多代码重构，但基本上你想在Countries.js中做的事情是这样的：

<li key = {country.id}>
    <Country country={country}>
</li>

希望这能为您提供所需的信息，以解决其余部分。

- Ben Chan

我添加了你的代码。显示：“名称：”，“首都”，但不显示法国，巴黎。 - user8777652

0

在 Countries.js 的渲染函数中，当返回结果时，应该使用 展开运算符 来展开国家数组，像这样：

return (
  <ul>
    { ...Countries } // you miss the spread operator
  </ul>
)

另外，在你的示例代码中，你实际上没有重用你的Country组件类。

你应该这样做：

const countries = data.map(country => (
  <li id={country.id}>
    <Country name={country.name} capital={country.capital}>
  </li>
))

并修改你的 Country.js 。你的实现非常凌乱。

参考此文以获得有关如何组合 React 组件的清晰说明：https://reactjs.org/docs/composition-vs-inheritance.html

- Chang

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user-developer · Accepted Answer

您可以尝试以下操作。

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')
);