将React组件值匹配到Javascript

不久前，我用香草javascript构建了一个系统，然后当我去更新它的某个部分时，我决定试着去尝试一下

基本知识：我有一个函数，可以初始化组件

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>
    );
  }
});

下面是一个来自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",
}]

---

我强烈建议您熟悉单向数据流的概念，这是反应不可或缺的一部分

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

诚然，嵌入

componentDidMount（）

中的AJAX调用是一种常见模式，尤其是在在线代码示例中。但这是一个简单的模式。认识到这将该数据的使用限制在组件本身（及其子组件）上。只要应用程序的其余部分需要访问该数据，就不再适合在React组件中获取该数据

---

所有这些都是说，我建议您将AJAX调用放在“香草JavaScript”中，并将结果作为道具提供给React组件。

这是我开始深入研究后的第二个想法。要么就是这样，要么扩展整个应用程序，将其封装在react中。这是我最终要做的基本工作。我仍然在react内部构建媒体库，但我将整个内容包装在我的Vanilla库中的模态对象中，然后从外部调用react对象的主要方法“getSelected”。

[{
    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",
}]