31、React 开发：组件组合、上下文与错误处理及表单验证全解析

React 开发：组件组合、上下文与错误处理及表单验证全解析

1. 上下文的使用

在 React 开发中，上下文（Context）是一种非常有用的机制，它可以帮助我们在组件树中共享数据，避免通过多层组件传递属性（prop threading）的繁琐过程。

1.1 消费上下文

消费上下文类似于定义一个渲染属性（render prop），只不过需要使用一个自定义的 HTML 元素来选择所需的上下文。具体来说，这个 HTML 元素的标签名由上下文名称、一个点号和 Consumer 组成，例如：

return <ProModeContext.Consumer>
    // ... 可以在这里消费上下文 ...
</ProModeContext.Consumer>

在这个 HTML 元素的开始标签和结束标签之间，是一个接收上下文对象并渲染依赖于该对象的内容的函数。示例代码如下：

<ProModeContext.Consumer>
    { contextData =>
        <button
            className={ this.getClasses(contextData.proMode)}
            disabled={ !contextData.proMode }
            onClick={ this.props.callback }>