如何将compoent添加到React中的其他组件？

如何添加组件Country.js到组件Countries.js如何将compoent添加到React中的其他组件？

我想在浏览器中显示：

名称：法国

资本：巴黎

名称：俄罗斯

首都莫斯科

//第一部分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'));

我想在浏览器中显示：

名称：法国

首都：巴黎

名称：俄罗斯

首都：莫斯科

谢谢您的帮助

来源

2017-10-16 Mario

难道这只是一个错字吗？你把“contact.id”而不是“country.id” –

它应该是'country.id'。你知道我怎么连接？ – Mario

有人帮助我吗？ – Mario

你可以尝试以下。

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

来源

2017-10-16 01:59:54

警告：函数作为React子无效。如果您从渲染中返回组件而不是，则可能会发生这种情况。或者，也许你打算调用这个函数而不是返回它。在UL（在Countries.js：17）中的国家（在App.js：15）在DIV（在App.js：15）在DIV（在App.js：13）在应用程序（在索引.js：8） – Mario

@Mario为以上答案添加了script.js。你能否再次尝试用上面的脚本代替script.js？ –

@Mario我发布我的答案之前测试。它为我工作。 –

这将需要更多的代码返工比我能在飞行中做，但基本上你会想这样做像这样在Countries.js：

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

希望这给你的信息，你需要解决它的其余部分。

来源

2017-10-16 00:40:17

我添加了你的代码。显示：“名称：”，“大写”，但不显示法国，巴黎 – Mario

在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。你的实际上很混乱。

请参阅本有关如何组成一个干净的解释阵营组件：https://reactjs.org/docs/composition-vs-inheritance.html

来源

2017-10-16 01:44:24 Chang

如何将compoent添加到React中的其他组件？

回答

相关问题