react native - 如何将参数从一个组件传递到另一个组件？

尝试程序

我有 2 个屏幕，一个带有图像选择器和上传功能，另一个带有地图和标记，

我的目标是添加带有照片的标记，并将该照片参考放在我在 firebase 中的标记集合中。

到目前为止，我设法把标记 latlng，

我在地图屏幕内使用模态：在模态内我调用图像选择器，一旦我上传照片并使用：

//inside UploadScreen ~~~
const urlRef =  storage()
            .ref(filename)
            .getDownloadURL();
            console.log('url: ', urlRef)

我需要 urlRef 出现在我的其他屏幕模式上。

  <Modal
       isVisible
       transparent
       onBackButtonPress={() => this.setState({ activeModal: null })}
       onBackdropPress={() => this.setState({ activeModal: null })}
      >
        
        <View style={styles.modalView}>
        <UploadScreen />  
        <TouchableOpacity onPress={()=>this.setState({activeModal: null})}>
          <Text> Close</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={() =>this._addMarker()}> //this adds the marker latlng
          <Text>add marker</Text>
        </TouchableOpacity>
        
        </View>
      </Modal>

在我的地图屏幕上，我调用<UploadImage/>加载该上传图像组件，上传完成后，我得到了 urlRef，我需要将其放入地图屏幕中的标记集合中。

 _addMarker() {
    console.log('marker cords?: ', this.state.marker)
    console.log('marker cords?: ', this.state.marker.longitude)
    markerRef.add({
      longitude: this.state.marker.longitude,
      latitude: this.state.marker.latitude,
      email: this.state.userEmail,
      imageUri: "will be image uri"
      
    })

  }

请给我一些指导，我不确定那里是否需要道具或其他东西。

欢迎任何建议或帮助。

提前致谢

康斯坦丁

通常，React 中的通信流程是自上而下的。这意味着父级将一些道具传递给子级，然后子级又对这些道具做一些事情。

但是，显然可以按照您想要的方式进行操作。为此，最简单的方法是useState在您的模态中使用创建一个状态。然后你将 setter 传递给 child，当 child 中的值被填充时，然后你将它传回给 parent。

在代码中它看起来像这样：

Modal.js (parent)

const [childUrlRef, setChildUrlRef] = useState(null);

<Modal
  isVisible
  transparent
  onBackButtonPress={() => this.setState({ activeModal: null })}
  onBackdropPress={() => this.setState({ activeModal: null })}
 >
        
   <View style={styles.modalView}>
   <UploadScreen setChildUrlRef={setChildUrlRef} />  
   ...
 </Modal>

UploadScreen (child)

当您在孩子中获得您的价值时，将其设置为状态以确保 React 看到它，然后将其传递给您的父母。

const [url, setUrl] = useState(null);

useEffect(() => {
  if (url) props.setChildUrlRef(url);
}, [url])

...

const urlRef =  storage()
.ref(filename)
.getDownloadURL();
console.log('url: ', urlRef)

setUrl(urlRef);
    ...

因此，您获取变量，将其设置为本地状态，然后使用 useEffect 监视该变量中的更改，一旦检测到更改，就会触发 useEffect 并通过通过 props 传递的状态设置器在您的父级中设置值.

如果您需要在没有直接关系的组件之间传递数据，请考虑使用Redux或React Context。

编辑：我刚刚看到您的 Modal 不起作用。如果你不能重构它，你仍然可以将一个函数传递给孩子，这会setState在你的父母内部触发。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。