父子组件的通信

state/props 实现父子组件的通信

父组件修改状态，传入子组件的数据也会被修改，父组件和子组件页面的值都会刷新。

import React from "react";
import First from "./First";
class App extends React.Component {
    state={
        info:'父组件的数据'
    }
    change=()=>{
        this.state.info='父组件数据被修改';
        this.setState(this.state);
    }
    render() {
        return (
            <div>
                <h1>父组件</h1>
                <p>{this.state.info}</p>
                <button onClick={this.change}>change</button>
                <hr />
                <First data={this.state.info}></First>
            </div>

        )
    }
}
export default App;


import React, { Component } from 'react'

export default class First extends Component {

  render() {
    return (
      <div>
          <h1>子组件</h1>
          <p>{this.props.data}</p>
      </div>
    )
  }
}

子组件修改父组件的数据是不可行的，因为数据是单向流的。在Vue中子组件修改了父组件的数据，子组件页面用到了该数据页面会刷新，而父组件的数据是无法被改变的。在React中的子组件页面不会刷新而且还会报错。

import React, { Component } from 'react'

export default class First extends Component {
  changefromson=()=>{
    this.props.data='子组件修改父组件';
  }
  render() {
    return (
      <div>
          <h1>子组件</h1>
          <p>{this.props.data}</p>
          <button onClick={this.changefromson}>changefromson</button>
      </div>
    )
  }
}

通过子组件修改父组件的数据，就可以将父组件修改状态的方法或者父组件对象作为属性传值给子组件，子组件利用传入的来调用父组件的函数，将修改的数据作为参数传给父组件。

import React from "react";
import First from "./First";
class App extends React.Component {
    state={
        info:'父组件的数据'
    }
    change=()=>{
        this.state.info='父组件数据被修改';
        this.setState(this.state);
    }
    sonchange=(arg)=>{
        this.state.info=arg;
        this.setState(this.state);
    }
    render() {
        return (
            <div>
                <h1>父组件</h1>
                <p>{this.state.info}</p>
                <button onClick={this.change}>changefromfather</button>
                <hr />
                <First data={this.state.info} fatherfn={this.sonchange}></First>
            </div>

        )
    }
}
export default App;


import React, { Component } from 'react'

export default class First extends Component {
  changefromson=()=>{
    this.props.fatherfn('子组件修改父组件的数据');
  }
  render() {
    return (
      <div>
          <h1>子组件</h1>
          <p>{this.props.data}</p>
          <button onClick={this.changefromson}>changefromson</button>
      </div>
    )
  }
}

在vue中是自定义事件，让子组件传入参数然后去触发父组件的修改数据的事件函数，父组件接受参数来修改数据，在react中是将函数传给子组件然后直接调用父组件的函数，将修改的数据作为参数。