react有三种通信方式：一、父传子，二、字传父，三、兄弟之间传值
一、父组件向子组件传值
父组件通过属性的方式传递参数，子组件通过props来接收父组件传递过来的参数
React中是单向数据流，数据只能从父组件通过属性的方式传给其子组件，如下图：
在引用子组件的时候传递，相当于一个属性，例如：在子组件内通过porps.param获取到这个param的值。
父组件向子组件传值，通过props，将父组件的state传递给了子组件。
父组件（直接定义一个属性传值即可）：
import React, {
Component } from 'react'
import NavigationBar from './NavigationBar'
export class App extends Component {
render() {
return (
<div>
<NavigationBar title="我是父组件向子组件传的值" />
</div>
)
}
}
export default App
子组件（通过this.props.父组件定义的属性 来接收父组件传递过来的参数）:
import React from "react";
class NavigationBar extends React.Component{
constructor(props){
super(props);
this.state = {
title:''
}
}
render(){
return(
<div>
{
this.state.title}
</div>
)
}
componentDidMount(){
this.setState({
title:this.props.title
})
}
}
export default NavigationBar;
效果：
二、子组件向父组件传值
子组件通过调用父组件传递到子组件的方法向父组件传递消息的
子组件（通过this.props.事件名(参数)的方式向父组件传递参数）：
import React from "react";
class NavigationBar extends React.Component{
constructor(props){
super(props);
this.state = {
title:''
}
}
render(){
return(
<div>
{
this.state.title}
<button onClick={
()=>{
this.props.titleMessage("我是子组件向父组件传的值")
}}>点击</button>
</div>
)
}
componentDidMount(){
this.setState({
title:this.props.title
})
}
}
export default NavigationBar;
父组件:
import React, {
Component } from 'react'
import NavigationBar from './NavigationBar'
export class App extends Component {
constructor(props){
super(props);
this.state={
titleMassage:''
}
}
message=(titleMessage)=>{
console.log(titleMessage);
this.setState({
titleMassage:titleMessage
})
}
render() {
return (
<div>
{
this.state.titleMassage}
<NavigationBar title="我是父组件向子组件传的值" titleMessage={
this.message} />
</div>
)
}
}
export default App
效果：
点击后的效果：
三、兄弟传值
兄弟组件之间的传值，是通过父组件做的中转 ，流程为：
组件A – 传值 --> 父组件 – 传值 --> 组件B
其实可以理解为把前两个步骤又重新做了一遍，即先执行子组件传值父组件，然后再执行父组件传值子组件，效果如下图：
兄弟组件1（把兄弟组件1的内容传给父组件，通过子传父的形式来传，把子组件的值给到父组件）：
// 第一个兄弟
import React, {
Component } from 'react'
export class ChildOne extends Component {
render() {
return (
<div>
<button onClick={
()=>{
this.props.ChildOneMessage("我是要向第二个子组件传的值（ChildTwo.js）")
}}>第一个子组件</button>
</div>
)
}
}
export default ChildOne
父组件:
import React, {
Component } from 'react'
// 兄弟传值的父组件
import ChildOne from './ChildOne'
import ChildTwo from './ChildTwo'
export class App extends Component {
constructor(props){
super(props);
this.state={
childoneMessage:''
}
}
childoneMessage=(childOne)=>{
console.log(childOne);
this.setState({
childoneMessage:childOne
})
}
render() {
return (
<div>
{
/* 第一个子组件 */}
{
this.state.childoneMessage}
<ChildOne ChildOneMessage={
this.childoneMessage} />
{
/* 第二个子组件 */}
<ChildTwo childtwo={
this.state.childoneMessage} />
</div>
)
}
}
export default App
效果：
点击后的效果：
接下来就是把父组件的值传给第二个的子组件，使用父传子
// 第二个兄弟的值
import React, {
Component } from 'react'
export class ChildTwo extends Component {
render() {
return (
<div>
第二个子组件：{
this.props.childtwo}
</div>
)
}
}
export default ChildTwo
效果：
