"2019-03-10 回答 Context 提供了一种传递数据的方式,他不需要你手动的通过组件树从上至下逐层传递属性。例如:在应用程序中需要通过许对组件才能获取用户身份验证、本地设置、UI 主题。 import React from 'react'; import ReactDOM from 'react-dom'; .."

React 中的 context 是什么?

2019-03-10

回答

Context 提供了一种传递数据的方式,他不需要你手动的通过组件树从上至下逐层传递属性。例如:在应用程序中需要通过许对组件才能获取用户身份验证、本地设置、UI 主题。

import React from 'react';
import ReactDOM from 'react-dom';

const ThemeContext = React.createContext({
  background: 'red',
  color: 'white'
});

class App extends React.Component {
  render () {
    return (
      <ThemeContext.Provider value={{background: 'green', color: 'white'}}>
        <Header />
      </ThemeContext.Provider>
    );
  }
}

class Header extends React.Component {
  render () {
    return (
      <Title>Hello React Context API</Title>
    );
  }
}
 
class Title extends React.Component {
  render () {
    return (
      <ThemeContext.Consumer>
        {context => (
          <h1 style={{background: context.background, color: context.color}}>
            {this.props.children}
          </h1>
        )}
      </ThemeContext.Consumer>
    );
  }
}

加分回答

返回总目录

30 秒面试系列一

  • 30Seconds

    前端面试 30s 系列问答翻译:

    英文原文请看 30-seconds-of-interviews

    99 引用 • 176 回帖 • 5 关注
  • 面试

    面试造航母,上班拧螺丝。多面试,少加班。

    204 引用 • 1136 回帖 • 479 关注
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    91 引用 • 180 回帖 • 673 关注
感谢    关注    收藏    赞同    反对    举报    分享
回帖    
请输入回帖内容...