如何在 react-native 中将函数的结果从一个组件传递到另一个组件？

Question

我有一个组件运行是一个函数，returns 是一个结果，但我需要我的其余组件才能从该函数访问该数据。我怎样才能做到这一点？

这是我的 app.js，其中包含组件。这是一个示例，但我的问题是如何运行 Camera 组件中的函数，然后引用 Display 组件中的数据。

  export default class App extends React.Component {

  render() {
    return (
            <View>
              <Camera />
            </View>
            <View>
              <Display />
            </View>

    );
  }
}

Answer 1

您可以将数据作为状态存储在父组件中，并将其作为道具传递给 Display，并允许 Camera 通过回调更改状态（setData在下面的示例中）。

export default class App extends React.Component {
  state = {
    data: null,
  };
  render() {
    return (
      <View>
        <View>
          <Camera setData={(data) => this.setState({ data })} />
        </View>
        <View>
          <Display data={this.state.data} />
        </View>
      </View>
    );
  }
}

const Camera = props => <Button onPress={() => props.setData(...)} />
const Display = props => <Text>{props.data}</Text>

Answer 2

如果您的 Display 组件依赖于 Camera 组件数据，我建议您将 Display 组件添加为 Camera 组件的子组件。您可以通过以下方式实现：

保持相机组件的状态，
根据某些 activity（例如按钮点击）更新函数中的状态
在你的Camera组件的render()方法中，只有当你想要的状态数据可用时，才挂载Display组件。
通过 props 将所需的数据传递给 Display 组件。

例如

Camera component

class Camera extends React.Component {
   constructor(props) {
       super(props);
       this.state = {
           data: null
       }       
    }

    foo = () => this.setState({data: 'new_data'});

    render() {
         const { data } = this.state;
         const dataPresent = data !== null;
         return (
          {
             !dataPresent && ( 
                <button value="set data" onClick={() => this.foo() />                
          )}
          { 
             dataPresent && ( 
                <Display data={data} /> 
          )}
        );
}

}

Display Component

const Display = (props) => <div> <span> { props.data } </span> </div>

如果您仍想 pass/use 从一个组件中获取另一个组件中的数据，并且两个组件都处于同一级别，则您要么需要父组件的状态，要么需要像 [=23 这样的全局存储=]Redux 将数据保存在一个地方并在 Display 组件中访问它。

Answer 3

我会推荐使用 redux，它简化了很多东西，不需要升级或将状态传递给 parent/child

在您的情况下，您需要在相机和显示组件中传递道具

如何在 react-native 中将函数的结果从一个组件传递到另一个组件？

how to pass the results of a function from one component to another in react-native?

reactjs

react-native

components

react-props