data.js

export default  [{  
id: 1,

name: 'France',
capital: 'Paris',
    },


    {   
        id: 2,
        name: 'Russia',
        capital: 'Moscow'
     }];

第一个组件CountryName.js

import React, { Component } from 'react'

class CountryName extends Component {
    render() {



const {data} = this.props;
        const CountryName = data.map(country => {
            return (
                <div>
                    <h2>{country.name}</h2>
                </div>                  
            )   
}) 

        return (
                    <div>
                        {CountryName}
                    </div>
        );
    }
}

export default CountryName;

第二个组成部分CountryCapital.js

import React, { Component } from 'react'

class CountryCapital extends Component {

    render() {

        const {data} = this.props;
        const CountryCapital = data.map(country => {
            return (
            <div>
                <p>{country.capital}</p>
            </div>

            )   
        }) 

        return (
                    <div>
                        {CountryCapital}
                    </div>
        );
    }
}


export default MovieDescription;

第三个组件Country.js

import React, { Component } from 'react'
import CountryName from './CountryName';
import CountryCapital from './CountryCapital';


class Country extends Component {

    render() {

        const {data} = this.props;
        const country = data.map(country => {
            return (
                <li key = {country.id}> 


                </li>
            )   
        }) 

        return (
                    <ul>
                        {Country}
                    </ul>
        );
    }
}


export default Country;

App.js

import React, {Component} from 'react';
import Country from './components/Country';

class App extends Component {
    render() {

        return (

            <div>
                <Country data={this.props.data}/>

            </div>
        )

    }
}

export default App;

//HTML:

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

Answer 1

首先，您的组件的结构是这样的，它将首先逐个列出所有国家/地区名称，然后逐个列出国家/地区的大写字母。

由于您的要求是将国家及其资本显示为一个组（如每行中列出的那样），因此您不需要两个组件。在Country组件中，只需调用新编写的组件即可将其显示为一个组。

这样的东西会起作用。将CountryName和CountryCapital组合到单个组件（CountryData），如下所示。

const {data} = this.props;
const CountryData = data.map(country => {
        return (
            <div>
                <div><h2>{country.name}</h2></div>
                <div><h2>{country.capital}</h2></div>
            </div>                  
        )   
})
return (
        <div>
          {CountryData}
        </div>
    );

在您的组件国家/地区，调用此新组件并传递道具，如：

import CountryData from './CountryData';
......
......
render() {

    const {data} = this.props;
    return (
        <CountryData data={this.props.data} />
    );
}

希望有所帮助。

Answer 2

错误：JSX元素必须包含在封闭标记中

            return (
            <div><h2>{country.name}</h2></div>
            <div><h2>{country.capital}</h2></div>
               ^
        )
    })

我如何将一个组件转换为另一个组件进行反应

data.js

第一个组件CountryName.js

第二个组成部分CountryCapital.js

第三个组件Country.js

App.js

2 个答案: