#javascript #node.js #reactjs #context-api #react-class-based-component
#javascript #node.js #reactjs #реагировать-контекст #компонент, основанный на реактивном классе
Вопрос:
Я объявил контекст реакции в indexa.js и я пытаюсь получить доступ к контекстному значению, установленному в App.js в Employee.js . Но это не рендеринг значения, для которого я новичок в React. Пожалуйста, помогите мне. Заранее спасибо
//index.js
export const employeeContext = React.createContext();
const AppContextInteration = <App></App>
ReactDOM.render(AppContextInteration, document.getElementById('root'));
//App.js
export class App extends React.Component {
constructor(props) {
super(props);
this.state = {
EmpId: 1,
EmpName: 'xxx'
}
}
render() {
return (
<div>
<h1> App Component</h1>
<p> Employee Id : {this.state.EmpId}</p>
<employeeContext.Provider value={this.state} >
<Employee/>
</employeeContext.Provider>
</div>
)
}
}
//Employee.js
export class Employee extends React.Component {
context = employeeContext;
constructor(props) {
super(props);
console.log();
}
render() {
return (
<div>
<h1>Employee Component </h1>
<p> Employee Id : {this.context.EmpId} </p>
</div>
)
}
}
Ответ №1:
вы можете использовать контекст.Потребитель
<MyContext.Consumer>
{value => /* render something based on the context value */}
</MyContext.Consumer>
https://reactjs.org/docs/context.html
Я предпочитаю использовать функциональный компонент с помощью useContext hook (это очень легко реализовать) вы можете обратиться к руководству по реагированию на крючки (useContext)
Ответ №2:
Как вы сказали, вы новичок в react, тем не менее, вы почти так хорошо поработали.Эта ошибка возникает, возможно, вы не импортировали контекст (employeeContext) в свой компонент employee, если вы уже импортировали, я предлагаю вам использовать преобразовать его в функциональный компонент и использовать (useContext), что было бы намного лучше, с точки зрения производительности и понимания. Спасибо