Javascript ReactJS，Context-API）读取另一个组件'；它的状态没有作为道具传递给它？

我已经开始学习ReactJS中上下文API的基本知识

这是使用reactJS的reactJS代码的一部分

app.js

import React from 'react';
import ReactDOM from 'react-dom';
import LeftPane from './LeftPane';
import RightPane from './RightPane';
import {SampleProvider} from './sample';
const App =()=>{
 return(
     <SampleProvider>
         <div className="panes">
             <LeftPane/>
             <RightPane/>
         </div>
     </SampleProvider>
   )
}
export default App;
ReactDOM.render(
   <App/>,
  document.getElementById('root')
)

从“React”导入React；
从“react dom”导入react dom；
从“/LeftPane”导入LeftPane；
从“/RightPane”导入RightPane；
从“./sample”导入{SampleProvider}；
常量应用=（）=>{
返回(
)
}
导出默认应用程序；
ReactDOM.render(

但我不理解100%

一切都很好。除了SampleConsumer组件中的功能，我什么都懂

您已将
SampleConsumer
设置为指向
createContext（）
的原始
Consumer
输出。它的功能与文档中的
ThemeContext.Consumer
示例完全相同

SampleConsumer中的函数使用sample作为参数。我测试了sample.state.value，它呈现“默认值”，它是SampleProvider组件中声明的状态值

您已经用
SampleProvider
组件包装了
createContext（）
的原始
提供程序
输出。这样做时，您将
提供程序的上下文值设置为（最初）为：


{
声明：{
值：“默认值”
},
行动：{
setValue：（value）=>{this.setState（{value}）}
}
}
RightPane.js

import React from 'react';
import Receives from './Receives';

const RightPane =()=>{
  return(
      <div className="pane">
          <Receives/>
      </div>
  )
};

export default RightPane;

import React,{Component , createContext} from 'react';

const Context = createContext();

const {Provider, Consumer : SampleConsumer}=Context;

class SampleProvider extends Component{
state={
    value:'default value'
}
actions={
    setValue:(value)=>{
        this.setState({value});
    }
}
render(){
    const {state,actions}=this;
    const value={state,actions};
    return(
        <Provider value={value}>
            {this.props.children}
        </Provider>
    )

}
}
export{
  SampleProvider,
  SampleConsumer
};

import React from 'react';
import {SampleConsumer} from './sample';
const Receives = ()=>{
 return(
     <SampleConsumer>
         { 
             (sample)=>(
                 <div>
                     Value:{sample.state.value}
                 </div>
             )

         }
     </SampleConsumer>
 )
}
console.log(Receives);
export default Receives;