将 JSON 对象从子组件传递到父组件答案

【问题标题】：Pass JSON object from child component to parent component将 JSON 对象从子组件传递到父组件
【发布时间】：2016-01-03 02:19:44
【问题描述】：

简而言之，我实施的是一个照片上传系统。我有一个显示上传图像预览的 div。这个 div 位于我们将称为 parent.jsx 的父组件中。在我们称为 child.jsx 的子组件中，我实现了一个上传系统。

在 child.jsx 中我有以下代码：

const FileUpload = React.createClass({
render: function() {
    return(
      <div>
        //dropzone is essentially a file input element
        <Dropzone multiple={false} onDrop={this._onDrop}>
        </Dropzone>
      </div>
    );
  },
  _onDrop: function(files) {
    this.setState({
      photo: files
    });
  },

我想将 photo 对象传递到我的父文件中，并在下面的 div 中显示它，并带有这个条件：

<div>
    {this.state.coverPhoto.map(function(file) {return <img key={1} src={file.preview} />;})}
</div>

我正在考虑创建一个在子组件中调用时返回照片对象的函数。在子组件中可能是这样的：

returnFiles: function() {
    return Photo
  }

然后在父组件中我可以调用 FileUpload.returnFiles 并使用返回的内容设置我的状态。有什么想法吗？

【问题讨论】：

标签： json reactjs

【解决方案1】：

虽然我认为调用子组件的函数具有直观意义，但这打破了 React 如此出色的工具的根本原因之一。

React 通过限制从父级到子级的数据流，极大地降低了应用程序的复杂性。

但是，就像 JavaScript 中的任何其他数据一样，您可以将函数传递给子级。这样，它们只在孩子的范围内被调用，而是在你需要它们的地方处理。

const Parent = React.createClass({
  render: function() {
    return(
      <Child onDrop={this.handleOnDrop}
    );
  },
  handleOnDrop: function(files) {
    this.setState({
      photo: files
    });
  }
}

const Child = React.createClass({
  render: function() {
    <Dropzone multiple={false} onDrop={this.props.onDrop} />
  }
})

【讨论】：