react跨组件传值

hss

发布于 2022-02-25 19:40:57

61500

代码可运行

文章被收录于专栏：前端卡卡西前端卡卡西

运行总次数：0

代码可运行

props

一层一层的传递，app组件通过props一层一层的往下传给ProfileHeader组件，期间通过了Profile组件，但Profile组件并不需要props。

import React, { Component } from 'react';

function ProfileHeader(props) {
  return (
    <div>
      <h2>用户昵称: {props.nickname}</h2>
      <h2>用户等级: {props.level}</h2>
    </div>
  )
}

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

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      nickname: "context类组件",
      level: 99
    }
  }

  render() {
    return (
      <div>
        {/* <Profile nickname={this.state.nickname} level={this.state.level} /> */}
        <Profile {...this.state} />
      </div>
    )
  }
}

Context-类组件

import React, { Component } from 'react';

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

// 创建Context对象
const MainContext = React.createContext({
  nickname: "createContext的默认值",
  level: -1,
})


/*
  要使用contextType，必须要用类组件
  如果ProfileHeader在React.createContext里面，则使用它的value值；
  如果ProfileHeader不在React.createContext里面，则会使用React.createContext的默认值
*/
ProfileHeader.contextType = MainContext;

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

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      nickname: "context类组件",
      level: 99
    }
  }

  render() {
    return (
      <div>
        <MainContext.Provider value={this.state}>
          <Profile />
        </MainContext.Provider>
        {/* <Profile /> */}
      </div>
    )
  }
}

Context-函数组件

import React, { Component } from 'react';

// 创建Context对象
const MainContext = React.createContext({
  nickname: "createContext的默认值",
  level: -1
})

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

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

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      nickname: "context函数组件",
      level: 99
    }
  }

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

多个Context-类组件

import React, { Component } from 'react';

// 创建Context对象
const MainContext = React.createContext({
  nickname: "aaaa",
  level: -1,
})

const ThemeContext = React.createContext({
  color: "red",
})

class ProfileHeader extends Component {
  // jsx -> 嵌套的方式
  render() {
    return (
      <MainContext.Consumer>
        {
          value => {
            return (
              <ThemeContext.Consumer>
                {
                  theme => {
                    return (
                      <div>
                        <h2>用户昵称: {value.nickname}</h2>
                        <h2>用户等级: {value.level}</h2>
                        <h2 style={{ color: theme.color }}>颜色: {theme.color}</h2>
                      </div>
                    )
                  }
                }
              </ThemeContext.Consumer>
            )
          }
        }
      </MainContext.Consumer>
    )
  }

}

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

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      nickname: "kobe",
      level: 99
    }
  }

  render() {
    return (
      <div>
        <MainContext.Provider value={this.state}>
          <ThemeContext.Provider value={{ color: "red" }}>
            <Profile />
          </ThemeContext.Provider>
        </MainContext.Provider>
      </div>
    )
  }
}

多个Context-函数组件

import React, { Component } from 'react';

// 创建Context对象
const MainContext = React.createContext({
  nickname: "aaaa",
  level: -1,
})

const ThemeContext = React.createContext({
  color: "red",
})

function ProfileHeader() {
  // jsx -> 嵌套的方式
  return (
    <MainContext.Consumer>
      {
        value => {
          return (
            <ThemeContext.Consumer>
              {
                theme => {
                  return (
                    <div>
                      <h2>用户昵称: {value.nickname}</h2>
                      <h2>用户等级: {value.level}</h2>
                      <h2 style={{ color: theme.color }}>颜色: {theme.color}</h2>
                    </div>
                  )
                }
              }
            </ThemeContext.Consumer>
          )
        }
      }
    </MainContext.Consumer>
  )

}

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

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      nickname: "kobe",
      level: 99
    }
  }

  render() {
    return (
      <div>
        <MainContext.Provider value={this.state}>
          <ThemeContext.Provider value={{ color: "red" }}>
            <Profile />
          </ThemeContext.Provider>
        </MainContext.Provider>
      </div>
    )
  }
}

属性展开

如果你已经有了一个 props 对象，你可以使用展开运算符 ... 来在 JSX 中传递整个 props 对象。以下两个组件是等价的：

function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}

function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020/10/14 ，如有侵权请联系 cloudcommunity@tencent.com 删除

app