Question

在快速总结中，我实现的是一个photoupload系统。我有一个显示上传图像预览的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并设置我的状态，返回什么。有什么想法吗？

Answer 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} />
  }
})

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

1 个答案: