9-跨组件的通信

一  一级一级props传递

 

 

/*
 * @Description: 
 * @Version: 2.0
 * @Autor: sun
 * @Date: 2022-10-16 00:36:57
 * @LastEditTime: 2022-10-16 00:48:59
 */
import React, { Component } from 'react';

function ProfileHeader(props) {
  const { nickName, level } = props
  return (
    <div>
      <h2>用户昵称: { nickName }</h2>
      <h2>用户等级: { level }</h2>
    </div>
  )
}

function Profile(props) {
  // const { nickName, level } = props
  return (
    <div>
      {/* <ProfileHeader nickName={ nickName } level={ level }/> */}
      <ProfileHeader { ...props }/>
      <ul>
        <li>设置1</li>
        <li>设置2</li>
        <li>设置3</li>
        <li>设置4</li>
      </ul>
    </div>
  )
}

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      nickName: "codeTest",
      level: 110,
    }
  }
  render() {
    const { nickName, level } = this.state
    return (
      <div>
        <Profile nickName={ nickName } level={level}/>
      </div>
    );
  }
}

export default App;

二 context参数传递

 

/*
 * @Description: 
 * @Version: 2.0
 * @Autor: sun
 * @Date: 2022-10-16 00:36:57
 * @LastEditTime: 2022-10-16 01:03:49
 */
import React, { Component } from 'react';

//创建Context对象
const UserContext = React.createContext({
  nickName: '张三',
  level: -1
})

class ProfileHeader extends Component {
  render() {
    console.log(this.context)
    return (
      <div>
        <h2>用户昵称: { this.context.nickName }</h2>
        <h2>用户等级: { this.context.level }</h2>
      </div>
    )
  }
}

ProfileHeader.contextType = UserContext

function Profile() {
  return (
    <div>
      <ProfileHeader />
      <ul>
        <li>设置1</li>
        <li>设置2</li>
        <li>设置3</li>
        <li>设置4</li>
      </ul>
    </div>
  )
}

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      nickName: "codeTest",
      level: 110,
    }
  }
  render() {
    return (
      <div>
        <UserContext.Provider value={ this.state }>
          <Profile />
        </UserContext.Provider>
      </div>
    );
  }
}

export default App;

 三  consumer传递

 

/*
 * @Description: 
 * @Version: 2.0
 * @Autor: sun
 * @Date: 2022-10-16 00:36:57
 * @LastEditTime: 2022-10-16 01:08:11
 */
import React, { Component } from 'react';

//创建Context对象
const UserContext = React.createContext({
  nickName: '张三',
  level: -1
})

function ProfileHeader() {
  return (
    <UserContext.Consumer>
      {
        value => {
          return (
            <div>
              <h2>用户昵称: { value.nickName }</h2>
              <h2>用户等级: { value.level }</h2>
            </div>
          )
        }
      }
    </UserContext.Consumer>
  )
}

function Profile() {
  return (
    <div>
      <ProfileHeader />
      <ul>
        <li>设置1</li>
        <li>设置2</li>
        <li>设置3</li>
        <li>设置4</li>
      </ul>
    </div>
  )
}

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      nickName: "codeTest",
      level: 110,
    }
  }
  render() {
    return (
      <div>
        <UserContext.Provider value={ this.state }>
          <Profile />
        </UserContext.Provider>
      </div>
    );
  }
}

export default App;

 四 多个Consumer传递

 

 

/*
 * @Description: 
 * @Version: 2.0
 * @Autor: sun
 * @Date: 2022-10-16 00:36:57
 * @LastEditTime: 2022-10-16 01:12:26
 */
import React, { Component } from 'react';

//创建Context对象
const UserContext = React.createContext({
  nickName: '张三',
  level: -1
})

const ThemeContext = React.createContext({
  color: 'black'
})

function ProfileHeader() {
  return (
    <UserContext.Consumer>
      {
        value => {
          return (
           <ThemeContext.Consumer>
            {
              theme => {
                return (
                  <div>
                    <h2>用户昵称: { value.nickName }</h2>
                    <h2>用户等级: { value.level }</h2>
                    <h2>颜色: { theme.color }</h2>
                  </div>
                )
              }
            }
           </ThemeContext.Consumer>
          )
        }
      }
    </UserContext.Consumer>
  )
}

function Profile() {
  return (
    <div>
      <ProfileHeader />
      <ul>
        <li>设置1</li>
        <li>设置2</li>
        <li>设置3</li>
        <li>设置4</li>
      </ul>
    </div>
  )
}

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      nickName: "codeTest",
      level: 110,
    }
  }
  render() {
    return (
      <div>
        <UserContext.Provider value={ this.state }>
          <ThemeContext.Provider value={{ color: 'red' }}>
            <Profile />
          </ThemeContext.Provider>
        </UserContext.Provider>
      </div>
    );
  }
}

export default App;