Question

我试图从React Native的一个页面中获取一个变量，然后传递给另一个。我试图通过两个页面之间的回调函数来完成此任务。

我正在将页面彼此导入：import MapFilters from "./MapFilters.js";

如何将选定的变量从MapFilters中获取到LucyChat中？

目的：

Selected代表我要在查询中使用的英里范围，以确定要在地图上呈现的标记范围。

我已经对查询中的值进行硬编码测试，并且看到了正确的结果，但是“地图过滤器”的目的是允许用户手动更改其搜索范围。

LucyChat正在显示带有查询的地图，以显示要显示的标记。

例如：var queryString ='来自Markers.Location <'+ mapFilterRange;

的标记的SELECT ID

LucyChat：

export default class LucyChat extends React.Component {

  passBackSelectedVar(selectedVar) {
    this.state = {
    mapFilterRange: selectedVar,  
    };

  }

    constructor(props) {

      MapFilters.getSelectedVar();

        super(props);
        this.state = {
            data: [],
            isMapReady: false,
            latitude: null,
            longitude: null,
            error: null,
            coords:[],    
            mapFilterRange: null,
        };


    }

MapFilters：

export default class MapFilters extends React.Component {



    constructor(props) {
        super(props);

        this.state = {
          selected: '50'
        };
      }
      onValueChange(value: string) {
        this.setState({
          selected: value
        });
      }

      getSelectedVar() {
        LucyChat.passBackSelectedVar(this.state.selected);
      };

Answer 1

我认为您应该重新考虑您的组件结构，并具有以下内容：

Range Selector (filters which user can change)
|-- Map Preview
|-- LucyChat ( Not sure what this component does )

范围选择器将是UI，用户可以在其中选择范围，该范围也将通过prop传递给其他2个组件。这样，他们将根据该参数更改重新渲染。

React Native页面之间的回调函数

1 个答案: