Question

我是 react-native 的新手，我想构建一个主屏幕。在我的主屏幕中，有一个日期选择器和一个时间选择器以及其他组件。我在另一个文件夹中编写了日期选择器和时间选择器的代码，然后像这样将其作为道具导入到我的主屏幕中。

import Datepicker from './components/Datepicker'
import Timepicker from './components/Timepicker'

export default HomeScreen() {
  return (
 <SafeAreaView>
  <Datepicker/>
  <Timepicker/>
<SafeAreaView>
)
}

如何访问在 Datepicker 和 Timepicker 中声明的日期和时间变量？

Answer 1

您需要某种共享状态。如果数据和对其执行的操作相对简单，只需将它们保存在一个 Context 中，您可以在两个兄弟组件中使用它。

Answer 2

您将要研究状态管理：https://reactnative.dev/docs/state

但是要回答您的问题，您可以这样做：

import React, { useState } from 'react';

export default HomeScreen() {
  const [date, setDate] = useState();
  const [time, setTime] = useState();
  return (
        <SafeAreaView>
            <Datepicker setDate={setDate} />
            <Timepicker setTime={setTime} />
        <SafeAreaView>
    )
}

然后在您的各个组件中，如果您需要它们，您可以分别传递时间和日期，但这样状态在父组件中并由子组件修改。

如何将 prop 数据传递给 react native 中的其他组件？

2 个答案: