如何使用React Native在另一个组件中重新加载组件或在操作后调用函数



我使用React NativeExpo在移动和平板电脑上开发应用程序。

目标是能够回答将几个问题分为不同类别的问卷。一个问题可能有一个类别,也可能没有,所以它们在代码中并没有真正相互遵循。

我使用一个循环来显示我的类别,其中包含问题。问题是组成部分,也是类别。

当我回答一个问题时,有时我想重新加载另一个特定的(或几个(问题。回答完我的问题后,我有一个要重新加载的问题列表。我想在组件中启动一个函数,或者完全重新加载它

我如何重新加载问题组件,该组件可能与我操作的组件相距甚远?

谢谢你的帮助!

我想用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

最新更新