1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

//父组件传值

class Father extends React.PureComponent{

render(){

return (

<Son value={"son"} />

)

}

}

class Son extends React.PureComponent{

render(){

return (

<div>this data is {this.props.value}</div>

)

}

}

1

2

3

4

5

6

7

8

9

10

11

function Fa(){

return (

<Son value={"son"} />

)

}

function Son(props){

return (

<div>this data is {props.value}</div>

)

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

//父组件给子组件传值以及说过了，现在总结子组件给父组件传值,此时往往需要父组件给子组件先传一个props函数，子组件通过调用传入的函数传值改变父组件的值

export default class Fa extends Component {

state = {faValue:'Fa1'}

changeFa = (value)=>{

this.setState(()=>{

return {faValue:value}

})

}

render() {

return (

<>

<h1>Fa's value is {this.state.faValue}</h1>

<Son changeFa={this.changeFa}/>

</>

)

}

}

export default class Son extends React.PureComponent{

changeValue = ()=>{

this.props.changeFa(this.inputRef.value)

}

render() {

return (

<>

<input type="text" placeholder={"请输入您的值"} ref={(el)=>{this.inputRef = el}}/>

<button onClick={this.changeValue}>change</button>

</>

)

}

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

function Fa(){

const [faValue,setFaValue] = useState("Fa1")

const changeFa = (value)=>{

setFaValue(value)

}

return (

<div>

<h1>Fa's value is {faValue}</h1>

<Son changeFa={changeFa} />

</div>

)

}

function Son(props){

const inputValue = useRef("")

//定义改变fa组件的值的函数

const changeFaValue = ()=>{

props.changeFa(inputValue.current.value)

}

return (

<>

<input type="text" placeholder={"请输入您要改变的值"} ref={inputValue}/>

<button onClick={changeFaValue}>change value</button>

</>

)

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

//比如针对之前的输入案例，我需要给兄弟组件传一个值value，如果不用props,我们该怎么写

Bro:

export default class Bro extends Component {

componentDidMount() {

this.sonData = PubSub.subscribe("brother",(msg,data)=>{

console.log("Bro Component have recived the msg",data);

})

}

componentWillUnmount() {

PubSub.unsubscribe(this.sonData)

}

render() {

return (

<>

<div>brother</div>

</>

)

}

}

Son:

export default class Son extends React.PureComponent{

changeValue = ()=>{

PubSub.publish("brother",this.inputRef.value)

}

render() {

return (

<>

<input type="text" placeholder={"请输入您的值"} ref={(el)=>{this.inputRef = el}}/>

<button onClick={this.changeValue}>change</button>

</>

)

}

}