Question

我在一段时间内用vanilla 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。

以下是整个反应类：

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？

或者在组件外部有一个按钮通过其道具获取值会更好吗？

IE

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不可或缺的。

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

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

所有这些都是说，我建议你把AJAX调用放在你的＆＃34; vanilla JavaScript＆＃34;并将结果作为道具提供给您的React组件。

将React Component值发送到Vanilla Javascript

1 个答案: