React has three communication methods: first, pass from father to son, second, pass from character to father, and third, pass value between brothers
1. The parent component passes values to the child component
The parent component passes parameters through properties, and the child component receives the parameters passed by the parent component through props
React is a one-way data flow. Data can only be passed from the parent component to its child components through attributes, as shown below:
Passing when referencing a subcomponent is equivalent to an attribute, for example , the value of porps.paramthis can be obtained in the subcomponent param.
The parent component passes the value to the child component, and through it props, the state of the parent component is passed to the child component.
Parent component (directly define an attribute to pass the value):
import React, {
Component } from 'react'
import NavigationBar from './NavigationBar'
export class App extends Component {
render() {
return (
<div>
<NavigationBar title="我是父组件向子组件传的值" />
</div>
)
}
}
export default App
Child component ( this.propsreceive the parameters passed by the parent component through the attributes defined by the parent component):
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;
effect:
Second, the child component passes the value to the parent component
The child component passes messages to the parent component by calling the method that the parent component passes to the child component
Child component (passing parameters to the parent component via this.props. event name (parameter)):
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;
Parent component:
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
effect:
Effect after click:
Three, brothers pass value
The transfer of values between sibling components is done by the parent component. The process is:
Component A-Passing Value --> Parent Component-Passing Value --> Component B
In fact, it can be understood as doing the first two steps again, that is, first execute the child component to pass the value to the parent component, and then execute the parent component to pass the value to the child component, the effect is as follows:
brother component 1 (passing the content of brother component 1 to The parent component is passed in the form of child to parent, and the value of the child component is given to the parent component):
// 第一个兄弟
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
Parent component:
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
effect:
The effect after clicking: The
next step is to pass the value of the parent component to the second child component, using parent to child
// 第二个兄弟的值
import React, {
Component } from 'react'
export class ChildTwo extends Component {
render() {
return (
<div>
第二个子组件：{
this.props.childtwo}
</div>
)
}
}
export default ChildTwo
effect:
