javascript - How can I add compoent to another component in React?

How can I add ponent Country.js to ponent Countries.js

I want to display in browser:

Name: France

Capital: Paris

Name: Russia

Capital: Moscow

//First ponent 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 ponent 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 './ponents/CountryForm';
import Countries from './ponents/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'));

I want to display in browser:

Name: France

Capital: Paris

Name: Russia

Capital: Moscow

Thank you for your help

How can I add ponent Country.js to ponent Countries.js

I want to display in browser:

Name: France

Capital: Paris

Name: Russia

Capital: Moscow

//First ponent 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 ponent 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 './ponents/CountryForm';
import Countries from './ponents/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'));

I want to display in browser:

Name: France

Capital: Paris

Name: Russia

Capital: Moscow

Thank you for your help

Share Improve this question edited Oct 16, 2017 at 0:58 asked Oct 16, 2017 at 0:11 user8777652

Could it just be a typo? You put "contact.id" instead of "country.id" – Ben Chan Commented Oct 16, 2017 at 0:25
it should be 'country.id'. Do you know how can I connect ? – user8777652 Commented Oct 16, 2017 at 0:30

Add a ment |

3 Answers 3

Sorted by: Reset to default 3

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

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:

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

Hopefully this gives you the info you need to solve the rest of it.

In the render function of Countries.js, you should spread the countries array when return the result, like this:

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

Also, in your example code, you are actually not reusing your Country ponent class.

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.

Refer to this for a clean explanation about how to pose React ponents: https://reactjs/docs/position-vs-inheritance.html

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How can I add compoent to another component in React? - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)