Question

我已经开始学习ReactJS中的Context 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')
)

RightPane.js

RightPane.js

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

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

export default RightPane;

sample.js

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
};

Receives.js

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;

一切都很好。我了解除SampleConsumer

中的功能以外的所有内容

组件。

SampleConsumer中的

函数使用sample作为参数。

我测试过，sample.state.value呈现“默认值”，它是在SampleProvider组件中声明的状态的值。

SampleProvider将状态作为道具传递给Provider组件。我了解

提供程序可以使用该状态。但是SampleConsumer中的参数如何理解

SampleProvider组件中的

状态？我从未将状态作为

的道具

SampleProvider组件..（我理解的是。也许是错误的）

我阅读了此文档

https://reactjs.org/docs/context.html

但不了解100％

Answer 1

一切都很好。我了解除了SampleConsumer组件中的功能以外的所有内容。

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

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

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

{
  state: {
    value: 'default value'
  },
  actions: {
    setValue: (value) => { this.setState({value}) }
  }
}

意味着，只要您调用SampleConsumer的子项SampleProvider，“子项作为函数”中的参数就会传递该值。换句话说，这将在上面的代码段中显示对象的字符串表示形式：

<SampleConsumer>
  { (value) => <div>{value.toString()}</div> }
</SampleConsumer>

SampleProvider将状态作为道具传递给Provider组件。我知道提供商可以使用该状态。

正确-您已将Provider的{{1}}属性设置为等于包含value状态的对象。

但是SampleConsumer中的参数如何理解SampleProvider组件中的状态？

这正是上下文API所完成的。 SampleProvider可以访问SampleConsumer的{{1}}道具，而无需将该道具传递给介于两者之间的所有子元素。请注意，这里的代码之间没有任何内容，因此有点琐碎；您链接的文档提供了一个更好的示例。

我从未将状态作为道具传递给SampleProvider组件..（我理解是这样。也许是错误的）

您将Provider的状态作为对value的支持。 SampleProvider依次将其属性传递给Provider。

我认为误解的核心是您对Provider的使用（或命名）。我不确定您要使用该状态做什么，但是它不再是真正的“提供程序”，这会使情况变得混乱。这与您的SampleConsumer不同，后者仍然是默认的SampleProvider，只是被重命名了。

ReactJS，上下文API）读取另一个组件的状态而不传递给它的支持？

1 个答案: