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 user8777652user8777652 2- 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
3 Answers
Reset to default 3You 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
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1742380001a4432936.html
评论列表（0条）