React 子组件之间传值及通信

版权声明：未经本人同意不得私自转载 https://blog.csdn.net/qq_40190624/article/details/88766345

需求:一个子组件在父组件中使用,值为父组件定义,或者内容为父组件定义 

父组件传值:

import React, { Component } from 'react';
import './App.css';
import Footer from './components/layout/Footer';


class App extends Component {
  render() {
    return (
      <div className="App">
        <Footer name="大小姐" count="2"/>
        <Footer name="周家" count="20"/>
      </div>
    );
  }
}

export default App;

子组件接收值:

import React from 'react'


const person = (props) =>{
  return(
    <p>叫{props.name}有{props.count}人</p>

  )
}
export default person;

如果想要接收父组件里传入的内容

父组件:

import React, { Component } from 'react';
import './App.css';
import Footer from './components/layout/Footer';


class App extends Component {
  render() {
    return (
      <div className="App">
        <Footer>我是子组件,我接来自父组件的传哈哈</Footer>
      </div>
    );
  }
}

export default App;

子组件:

import React from 'react'


const person = (props) =>{
  return(
    <div>
        <p>{props.children}</p>
    </div>
  )
}
export default person;