20201104-初学react(四)

组建通信——父传子

方法一
父组件

//App.js
import React, {Component} from 'react';
import {Rfc, Rcc} from './component/index'

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      step: 1
    }
  }

  render() {
    return (
      <div>
        <Rfc title='无状态组件' />
        <Rcc title='有状态组件' getSon={this.getSon}/>
      </div>
    )
  }
}

无状态子组件接受传值

//Rfc.js
import React from 'react';

export default function Rfc(props) {
  let str='无状态组件'
  return (
    <div>{props.title}</div>
  )
}

有状态组件传值

//Rcc.js
import React, {Component} from 'react';

export default class Rcc extends Component {
  render() {
    return (
      <div>
        {this.props.title}
      </div>
    )
  }
}

方法二
有状态组件

//Rcc.js
import React, {Component} from 'react';

export default class Rcc extends Component {
  constructor(props) {
    super(props);
    this.state={
      title:props.title
    }
  }
  render() {
    //解构
    const {title}=this.state
    return (
      <div>
        {title}
      </div>
    )
  }
}

方法三
父组件

//App.js
import React, {Component} from 'react';
import {Rfc, Rcc} from './component/index'

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      step: 1
    }
  }

  render() {
    return (
      <div>
        <Rfc title='无状态组件'>组件之间传递数据</Rfc>
        <Rcc title='有状态组件' getSon={this.getSon}>组件之间传递数据</Rcc>
      </div>
    )
  }

  getSon(data) {
    console.log(data)
  }

}

无状态子组件

//Rfc.js
import React from 'react';

export default function Rfc(props) {
  let str='无状态组件'
  return (
    <div>{props.title}----{props.children}</div>
  )
}

有状态子组件

//Rcc.js
import React, {Component} from 'react';

export default class Rcc extends Component {
  constructor(props) {
    super(props);
    this.state={
      title:props.title
    }
  }
  render() {
    //解构
    const {title}=this.state
    return (
      <div>
        {title}----{this.props.chi}
      </div>
    )
  }
}

组建通信——子传父

有状态子组件

//Rcc.js
import React, {Component} from 'react';

export default class Rcc extends Component {
  constructor(props) {
    super(props);
    this.state = {
      title: props.title
    }
  }

  render() {
    //解构
    const {title} = this.state
    return (
      <div>
        {title}----{this.props.children}
        <button onClick={this.handleSetData}>给父组件传值</button>
      </div>
    )
  }

  handleSetData = () => {
    this.props.getSon('子组件的数据')
  }
}

父组件

import React, {Component} from 'react';
import {Rfc, Rcc} from './component/index'

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      step: 1
    }
  }

  render() {
    return (
      <div>
        <Rfc title='无状态组件'>组件之间传递数据</Rfc>
        <Rcc title='有状态组件' getSon={this.getSon}>组件之间传递数据</Rcc>
      </div>
    )
  }

  getSon(data) {
    console.log(data)
  }
}

兄弟之间传值

父组件

//App.js
import React, {Component} from 'react';
import {Rfc, Rcc,Child1,Child2} from './component/index'

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      step: 1
    }
  }

  render() {
    return (
      <div>
        {/*<Rfc title='无状态组件'>组件之间传递数据</Rfc>
        <Rcc title='有状态组件' getSon={this.getSon}>组件之间传递数据</Rcc>*/}
        <Child1 count={this.state.count}></Child1>
        <Child2 addCount={this.addCount} step={this.state.step}></Child2>
      </div>
    )
  }
  //
  // getSon(data) {
  //   console.log(data)
  // }

  addCount = (step) => {
    this.setState((state) => {
      return {
        count: state.count += step
      }
    })
  }
}

第一个兄弟组件

//Child1
import React, {Component} from 'react';

export default class Child1 extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <div>子组件1---{this.props.count}</div>
    )
  }
}

第二个兄弟组件

//Child2.js
import React, {Component} from 'react';

export default class Child2 extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <div>子组件2- <button onClick={this.handleClick}>+</button></div>
    )
  }

  handleClick = () => {
    const {addCount, step} = this.props
    addCount(step)
  }
}

context组件传值(爷传孙)

import React, {Component} from 'react';
import ReactDom from 'react-dom'

const {Provider, Consumer} = React.createContext()

class Grandpa extends Component {
  state = {
    msg: '爷爷给孙子发糖'
  }

  render() {
    return (
      <div>
        <Provider value={this.state.msg}>
          <Parent></Parent>
        </Provider>
      </div>
    )
  }
}

class Parent extends Component {
  render() {
    return (
      <div>
        parent
        <Son></Son>
      </div>
    )

  }
}

class Son extends Component {
  render() {
    return (
      <div>
        孙子组件---{this.props.msg}
        <Consumer>
          {
            data => {
              return <span>{data}</span>
            }
          }
        </Consumer>
      </div>
    )
  }
}

ReactDom.render(
  <Grandpa/>,
  document.getElementById('root')
)

context模块化

代码

import React, {Component} from 'react';
import Son from'./son'

export default class index extends Component {
  render() {
    return (
      <div>
        parent
        <Son></Son>
      </div>
    )
  }
}

parent 下面的文件son.js

import React, {Component} from 'react';
import {Consumer} from'../../CreateContext'

export default class son extends Component {
  render() {
    return (
      <div>
        孙子组件---{this.props.msg}
        <Consumer>
          {
            data => {
              return <span>{data}</span>
            }
          }
        </Consumer>
      </div>
    )
  }
}

App.js

import React, {Component} from 'react';
import Parent from './component/Parent/index'
import {Provider} from "./CreateContext";

export default class App extends Component{
  state = {
    msg: '爷爷给孙子发糖'
  }

  render() {
    return (
      <div>
        <Provider value={this.state.msg}>
          <Parent></Parent>
        </Provider>
      </div>
    )
  }
}

props 进阶