React 组件之间传值

一、父组件向子组件传值

父组件向子组件传值 也是通过 props 来传，在子组件中用 this.props.xx 接收父组件传来的值，思路跟 Vue 差不多

父组件代码

import React, {
    Component } from 'react'
import {
   HashRouter as Router, Route,Link} from 'react-router-dom'
import Child from './Child'
export default class Parent extends Component {
   
    constructor(){
   
        super()
        this.state= {
   
            name:"张三",
            age:66
        }
    }
    render() {
   
        return (
            <Router>
                <div>
                    <h3>这是父组件</h3>
                    {
   /* 这里是把this.state 中的name age 传给子组件 */}  
                    <Child name={
   this.state.name} age={
   this.state.age}/> 
                </div>
          
            </Router>
        )
    }
}

子组件代码

import React, {
    Component } from 'react'

export default class Child extends Component {
   
   
   
    render() {
   
        return (
            <div>
                 <h3>这是子组件</h3>
                 {
   /* 在子组件里通过this.props.xx 接收到父组件传过来的值 */}
                <p>这是父组件传来的值：{
   this.props.name}</p>
                <p>这是父组件传来的值：{
   this.props.age}