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()<