时间戳

首页 > 解决方案 > react native - 如何将参数从一个组件传递到另一个组件？

reactjs - 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"
      
    })

  }

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

欢迎任何建议或帮助。

提前致谢

标签： reactjsreact-native

解决方案

通常，React 中的通信流程是自上而下的。这意味着父母将一些道具传递给孩子，然后孩子反过来用这些道具做一些事情。

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

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

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 并通过 state setter 通过 props 设置父级内部的值.

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

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

推荐阅读