我使用React Native和Expo在移动和平板电脑上开发应用程序。
目标是能够回答将几个问题分为不同类别的问卷。一个问题可能有一个类别,也可能没有,所以它们在代码中并没有真正相互遵循。
我使用一个循环来显示我的类别,其中包含问题。问题是组成部分,也是类别。
当我回答一个问题时,有时我想重新加载另一个特定的(或几个(问题。回答完我的问题后,我有一个要重新加载的问题列表。我想在组件中启动一个函数,或者完全重新加载它。
我如何重新加载问题组件,该组件可能与我操作的组件相距甚远?
谢谢你的帮助!
我想用UseEffect来修改我的全局变量,但它不起作用。此外,我也无法完全重新加载我的页面。我想专门重新加载问题组件或运行函数。
我已经尝试过的:
-
使用global中的一个函数完全从屏幕上重新加载页面,但不起作用(我有很多元素,所以我想避免重新加载所有内容(
-
用useEffect更改我的问题列表以检查我的id是否在其中,但听力没有完成
-
我不能在问题的道具中发送函数或其他元素,因为它们可能在不同的组件(类别或其他(中太远了。
问题组件(简化(:
export default function RealisationQuestionComponent(props){
//When action in Question A
function changeCheckA(value) {
[...]
if (props.question.questions_impactees !== undefined) {
global.questions_impactees = props.question.questions_impactees;
}
}
//Effect in Question B
useEffect(() => {
[my function or reload entire component]
}, [global.questions_impactees]);
return (
<>...</>
)
编辑:
根据答案,我试图使用useContext来检索我的信息,但它告诉我找不到变量:RealContext
我想做的事:
https://www.w3schools.com/react/showreact.asp?filename=demo2_react_context2
我所做的:
我的屏幕音频确认屏幕
const RealContext = createContext();
const [listIdVictimes, setListIdVictimes] = useState('please test');
[...]
return (
<RealContext.Provider value={listIdVictimes}>
<RealisationChapitreComponent/>
</RealContext.Provider>
)
实现章节组件>[…]>实现问题组件
在我的组件实现问题组件
const listTest = useContext(RealContext);
[...]
return (
<Text> {listTest} </Text>
)
这样行吗?
使用[contexts][1]。将[reducers][2]与上下文结合使用会更加灵活和有组织。
如果你有很多状态需要管理,兄弟姐妹、父子关系和亲子关系一团糟,那么使用[Reux][3]可以让你更好地控制管理这些组件及其状态
我曾经为做过什么
如何在另一个组件中执行操作后重新加载组件或调用函数具有React Native 的组件
const context = ... // declare
然后
// import context
const App=()=>{
...
return(
<Context.Provider value={your functions, data, states, props whatever you want}>
{{ ...child components }}
<Context.Provider/>
)
}
You can play with these contexts usage to achieve your goal
[1]: https://reactjs.org/docs/hooks-reference.html#usecontext
[2]: https://reactjs.org/docs/hooks-reference.html#usereducer
[3]: https://redux.js.org/introduction/why-rtk-is-redux-today#what-is-redux