React组件通信以及State状态的使用

APP.JS

import React,{ Component } from 'react'

 

import './App.css';

 

import Person from './Person/Person'

 

class App extends Component {

 state = {

    persons:[

      { name:"张三",count:50 },

      { name:"张三1",count:60 },

      { name:"张三2",count:70 },

      { name:"张三3",count:80 },

    ],

    otherState:"anything"

  }

 

 switchNameHandler = ()=>{

    this.setState({

      persons:[

        { name:"张三",count:10 },

        { name:"张三1",count:60 },

        { name:"张三2",count:70 },

        { name:"张三3",count:80 }

      ]

    })

  }

  render(h) {

    return (

      <div className="App">

        <h1>hello React!</h1>

        <button onClick={this.switchNameHandler}>更改状态</button>

        <Person name={this.state.persons[0].name} count={this.state.persons[0].count} />

        <Person name="张三1" count="40"/>

        <Person name="张三2" count="50"/>

        <Person name="张三3" count="60">你好帅！</Person>

      </div>

    )

  }

}

组件person 接收

export default App;

import React from 'react'

 

const person = ( props )=>{

    return(

        <div>

            <p>你好，{props.name},你有{props.count}个作品</p>

            <p>{props.children}</p>

        </div>

    )

}

 

export default person;