The React parent uses props to control the child components to perform different rendering methods

import React, { Component } from 'react';

class Item extends Component {
  constructor(props) {
    super(props)
    this.state = {
      content: ' '}}componentWillReceiveProps(nextProps) {
    if(nextProps.fun1 ! = =this.props.fun1) {
      this.fun1(nextProps.myArgument)
    } else if(nextProps.fun2 ! = =this.props.fun2) {
      this.fun2(nextProps.myArgument)
    }
  }  

  // Functions can contain complex logic such as Ajax requests
  fun1(myArgument) {
    let { fun1 } = this.props
    this.setState({
      content: 'from fun1:' + myArgument
    })
    console.log('fun1 number of executions :' + fun1)
  }
  fun2(myArgument) {
    let { fun2 } = this.props
    this.setState({
      content: 'from fun2:' + myArgument
    }) 
    console.log('fun2 number of executions :' + fun2)   
  }
  render() {
    let { content } = this.state
    return (
      <div>
        {content}
      </div>)}}// The parent component controls the child components to perform different methods to render using props
class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      fun1: 0.fun2: 0.myArgument: []}}render() {
    let { fun1, fun2, myArgument } = this.state
    return (
      <div>
        <Item fun1={fun1} fun2={fun2} myArgument={myArgument}/>
        <button onClick={this.handleFun1.bind(this)}>Fun1</button>
        <button onClick={this.handleFun2.bind(this)}>Fun2</button>
      </div>); }}/ / event
Object.assign(App.prototype, {
  handleFun1() {
    let { fun1 } = this.state
    fun1 = fun1 + 1
    this.setState({
      fun1,
      myArgument: ['xu'.'tongbao']})},handleFun2() {
    let { fun2 } = this.state
    fun2 = fun2 + 1
    this.setState({
      fun2,
      myArgument: ['xu'.'with the bartender']})}})export default App
Copy the code