向Vanilla Javascript发送一个React组件值

Question

一段时间前，我用香草javascript构建了一个系统，然后当我去更新其中的某个部分时，我决定尝试让它做出反应。

Basics:我有一个函数，它将初始化一个组件--如下所示。

function openMediaLibrary(current){
  $('#mediaLibrary').show();
  var container = document.getElementById('mediaLibrary');
  return ReactDOM.render(
    React.createElement(
      MediaLibrary, 
      { url: "/file/getFileList/",current:current }), 
      container
    );
}

react组件正在构建一个媒体库，供用户选择。不知何故，我需要把结果传回我的vanlissa javascript。

下面是整个react类：

var MediaLibrary = React.createClass({
  getInitialState: function() {
    return {
      data: []
    };
  },

  componentDidMount: function() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      cache: false,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },

  onUpdate: function(val){
    this.setState(val);
  },

  getSelectedFiles: function(){
    var data = _.filter(this.state.data, function(obj) {
      return obj.selected;
    });
    return data;
  },

  render: function() {
    return (
      <div className="media-library panel">
        <FileList data={this.state.data} onUpdate={this.onUpdate}/>
        <FileUpload />
        <SubmitSelected submitSelected={this.getSelectedFiles}/>
      </div>
    );
  }
});

var FileList = React.createClass({
  handleSelect: function(index) {
    this.props.data[index].selected = (this.props.data[index].selected == true) ? false : true;
    this.props.onUpdate(this.props);
  },
  render: function() {
    var fileNodes = this.props.data.map( function(file,index) {
      var bindClick = this.handleSelect.bind(this,index);
      return (
        <File onClick={bindClick} key={index} data={file} />
      );
    },this);

    return (
      <div className="files-list clearfix ">
        {fileNodes}
      </div>
    );
  }
});

var File = React.createClass({
  render: function() {
    var classes = classNames('media-file', {selected: this.props.data.selected});
    return (
      <div className={classes} onClick={this.props.onClick}>
        <div className="media-file-image-wrapper">
          <img src={this.props.data.thumbnail} />
        </div>
        <span className="media-file-name">{this.props.data.fileName}</span>
      </div>
    );
  }
});

var SubmitSelected = React.createClass({
  handleClick: function(){
    this.props.submitSelected();
  },
  render: function() {
    var bindClick = this.handleClick.bind(this);
    return (
      <div className="SubmitSelected">
        <button className="media-library-submit-selected" onClick={bindClick}>Submit</button>
      </div>
    );
  }
});

var FileUpload = React.createClass({
  render: function() {
    return (
      <div className="file-upload-wrapper">

      </div>
    );
  }
});

选中的提交将遍历并抓取所有选定的提交，并将其返回给该类。但是我怎么把它排放到我的香草js呢？

还是让组件外部的按钮通过其道具获取值更好呢？

即

var bob = openMediaLibrary(current);
$('submit-button-outside-react').click(function(){
    return bob.getSelectedFiles();
});

下面是ajax中的初始状态示例：

[{
    "id": "1",
    "userId": "2",
    "fileName": "GC3_front (3).png",
    "fileMime": "image\/png",
    "fileUrl": "\/file\/christian\/GC3_front%20%283%29.png",
    "thumbnail": "",
    "uploadDate": "2016-03-08 11:06:43"
}, {
    "id": "2",
    "userId": "2",
    "fileName": "knocking-doors (2).jpg",
    "fileMime": "image\/jpeg",
    "fileUrl": "\/file\/christian\/knocking-doors%20%282%29.jpg",
    "thumbnail": "",
    "uploadDate": "2016-03-08 11:10:45"
}, {
    "id": "3",
    "userId": "2",
    "fileName": "fluent_logo_green (1).png",
    "fileMime": "image\/png",
    "fileUrl": "\/file\/christian\/fluent_logo_green%20%281%29.png",
    "thumbnail": "",
    "uploadDate": "2016-03-08 13:01:28"
}, {
    "id": "4",
    "userId": "2",
    "fileName": "infographic.png",
    "fileMime": "image\/png",
    "fileUrl": "\/file\/christian\/infographic.png",
    "thumbnail": "\/file\/christian\/thumbnail\/infographic.png",
    "uploadDate": "2016-03-08 13:03:22"
}, {
    "id": "5",
    "userId": "2",
    "fileName": "GC3_front (4).png",
    "fileMime": "image\/png",
    "fileUrl": "\/file\/christian\/GC3_front%20%284%29.png",
    "thumbnail": "\/file\/christian\/thumbnail\/GC3_front%20%284%29.png",
    "uploadDate": "2016-03-08 13:09:19"
}]

然后，在我选择一个项目之后，给出一个示例：

[{
    fileMime: "image/png",
    fileName: "infographic.png",
    fileUrl: "/file/christian/infographic.png",
    id: "4",
    selected: true,
    thumbnail: "/file/christian/thumbnail/infographic.png",
    uploadDate: "2016-03-08 13:03:22",
    userId: "2",
}]

Answer 1

我强烈鼓励您熟悉单向数据流的概念，这是响应所必需的。

基本上反应是视图层。视图层是数据结束的地方，而不是开始的地方。React组件可以将数据向下传递给它的子组件，但它不应该将数据传递到应用程序的其他部分。

诚然，隐藏在componentDidMount()中的AJAX调用是一种常见的模式，特别是在在线代码示例中。但这是一个简单的模式。认识到这限制了对组件本身(及其子组件)数据的使用。一旦应用程序的其他部分需要访问该数据，就不再适合在您的React组件中获取该数据。

所有这些都是为了说明，我建议您将AJAX调用放在您的“普通JavaScript”中，并将结果作为支持提供给您的React组件。