MyContext.js
import React from "react";
const MyContext = React.createContext('test');
export default MyContext;
创建了一个上下文单独的js文件,我可以在父文件和子组件中访问它
Parent.js
import MyContext from "./MyContext.js";
import Child from "./Child.js";
class Parent extends Component {
constructor(props) {
super(props);
this.state = {
Message: "Welcome React",
ReturnMessage:""
};
}
render() {
return (
<MyContext.Provider value={{state: this.state}}>
<Child />
</MyContext.Provider>
)
}
}
因此,在Provider选项卡中创建了一个父组件,其中包含Provider上下文和调用子组件
Child.js
import MyContext from "./MyContext.js";
class Child extends Component {
constructor(props) {
super(props);
this.state = {
ReturnMessage:""
};
}
ClearData(context){
this.setState({
ReturnMessage:e.target.value
});
context.state.ReturnMessage = ReturnMessage
} …假设我有一个Parent组件提供Context一个Store对象。为了简单起见，我们假设这个 Store 有一个值和一个更新该值的函数
class Store {
// value
// function updateValue() {}
}
const Parent = () => {
const [rerender, setRerender] = useState(false);
const ctx = new Store();
return (
<SomeContext.Provider value={ctx}>
<Children1 />
<Children2 />
.... // and alot of component here
</SomeContext.Provider>
);
};
const Children1 = () => {
const ctx = useContext(SomeContext);
return (<div>{ctx.value}</div>)
}
const Children2 = () => {
const ctx = useContext(SomeContext);
const …javascript reactive-programming typescript reactjs react-context
当谈到状态集中化时，我知道如何使用 context api 和 Redux。但要恢复该状态，我们始终必须位于反应组件内。
访问不在反应组件内部的公共函数内的全局状态/变量的最佳策略是什么？
在环境变量中不是一个选项，因为该值在应用程序运行后会更改。出于安全原因，我不想放入 cookie 或本地存储。
索引.ts
import React from 'react';
import ReactDOM from 'react-dom';
import { ApolloProvider } from 'react-apollo';
import apolloClient from './services/apollo';
import { PersonalTokenProvider } from './providers/personal-token';
import './index.css';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<PersonalTokenProvider>
<ApolloProvider client={apolloClient}>
<App />
</ApolloProvider>
</PersonalTokenProvider>
</React.StrictMode>,
document.getElementById('root'),
);
PresonalToken 上下文提供者
import React, { useState } from 'react';
interface ProviderProps {
children: JSX.Element[] | JSX.Element;
}
export const PersonalTokenContext = React.createContext({});
export const PersonalTokenProvider: React.FC<ProviderProps> = ( …我正在尝试使用这篇文章作为指导，从子组件动态设置父组件中的上下文
这是我的 App.tsx：
export interface User {
username: string;
}
export interface iUserContext {
users: User[];
setUsers: React.Dispatch<React.SetStateAction<User[]>>;
}
function App() {
const [users, setUsers] = useState<User[]>([]);
const value = { users, setUsers };
// set defaults
const UsersContext = createContext<iUserContext>({
users: [],
setUsers: () => {},
});
return (
<div className="App">
<Router>
<UsersContext.Provider value={value}>
<Layout>
<Switch>
<Route path="/generated-links">
<GeneratedLinks />
</Route>
<Route path="/">
<GenerateLinks />
</Route>
</Switch>
</Layout>
</UsersContext.Provider>
</Router>
</div>
);
}
然后，在GenerateLinks.tsx中：
const GenerateLinks = () …