在reactjs中传递组件之间的数据

Question

我在我的网络应用中实现了一个图像裁剪器，如下面的那个

http://roadmanfong.github.io/react-cropper/example/

它是作为一个单独的组件实现的，我按如下方式显示裁剪的图像

<img style={{ width: '124',height:'124' }} src={this.state.cropResult} alt="cropped image"/>

我想在另一个组件中显示另一个图像标记中的裁剪图像（this.state.cropResult）。如何在组件之间共享此裁剪图像？

Answer 1

选项1：使用flux / redux

http://fluxxor.com/what-is-flux.html

http://redux.js.org/docs/introduction/

选项2：将状态向上提升到第一个组件，其中包含需要此数据的组件

https://facebook.github.io/react/docs/lifting-state-up.html

Answer 2

如果组件是父组件的子组件，则非常容易。只需通过道具发送。

如果该组件位于其他位置，则必须使用回调定义的父组件将数据存储在公共父组件中，然后发送到第一个组件。第一个设置数据，其他设备使用道具。

如果您只有1或2例传输数据，我认为redux可能是一笔沉重的投资。