Fatal编程技术网
  • javascript/
  • Javascript 如何向React中的另一个组件添加组件？

Javascript 如何向React中的另一个组件添加组件？

javascript reactjs

Javascript 如何向React中的另一个组件添加组件？,javascript,reactjs,Javascript,Reactjs,如何将component Country.js添加到component Countries.js 我想在浏览器中显示： 姓名：法国 首都：巴黎 姓名：俄罗斯 首都：莫斯科 //第一个组件Country.js import React, { Component } from 'react' class Country extends Component { render() { const {data} = this.props; return (

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

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

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;

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

<body>
    <div id="root"></div>
</body>
我想在浏览器中显示：

姓名：法国

首都：巴黎

姓名：俄罗斯

首都：莫斯科

感谢您的帮助

这需要更多的代码修改，比我在运行中所能做的还要多，但基本上您希望在Countries.js中执行类似的操作：

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

  • 

    •
    希望这能为您提供解决其余问题所需的信息。

    在
    Countries.js
    的渲染函数中，您应该在返回结果时展开Countries数组，如下所示：

    return (
  <ul>
    { ...Countries } // you miss the spread operator
  </ul>
)
    并修改您的
    Country.js
    。你的真是一团糟

    请参阅本手册，以获得有关如何撰写React的清晰解释 组成部分：

    您可以尝试以下方法

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

    var数据=[
{
id:1，
名称：“法国”，
首都：“巴黎”
},
{
id:2，
名称:"俄罗斯",，
首都：“莫斯科”
}];
类Country.Component{
render（）{
返回(

    
名称：{this.props.Name}

    

    
大写：{this.props.Capital}

    
)
}
}
类。组件{
render（）{
常量样式={
listStyleType:“无”
}
const{data}=this.props；
const countries=data.map（国家=>{
返回(

  • 

    • 
)
})
返回(

      
{国家}

    
)
}
}
类应用程序扩展了React.Component{
render（）{
返回(
)
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);
    可能是打字错误吗？把“contact.id”改为“country.id”，应该是“country.id”。你知道我如何连接吗？我添加了你的代码。Display:“name:”，“capital”，但不显示France，ParisWarning:函数作为子函数无效。如果返回组件而不是从渲染返回组件，则可能会发生这种情况。或者你是想调用这个函数而不是返回它。在ul（在Countries.js:17）在Countries（在App.js:15）在div（在App.js:15）在div（在App.js:13）在App（在index.js:8）中@Mario在上述答案中添加了script.js。请您再次尝试将script.js替换为上述内容好吗？@Mario我在发布答案之前进行了测试。它对我有用。@Mario这是你用的小提琴 
    const countries = data.map(country => (
  <li id={country.id}>
    <Country name={country.name} capital={country.capital}>
  </li>
))

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