Question

所以我有两个子组件头和occasionlist.And我希望流应该像头一样首先处理后跟我的父组件，然后才能呈现场列表组件。这是我的入口组件app.js.Pusher在app.js中配置，用于捕获从后端（spring）触发的事件。

    var React=require('react');
var ReactDOM=require('react-dom');
var Pusher=require('pusher-js');
/*var fetch = require('node-fetch');*/
var fetch=require('isomorphic-fetch');
require('es6-promise').polyfill();
var Header=require('./components/header.js').Header;
var OccasionList=require('./components/OccasionList.js').OccasionList;

var App = React.createClass({
  getInitialState: function() {
    return { items: [], holidays: [] };
  },

  componentWillMount: function() {
      alert("in mount")

    this.pusher = new Pusher("ba34e3874d4b87905f36", {
      encrypted: true,
      cluster: 'ap2',
    });
    this.channel = this.pusher.subscribe("doodles");
    this.total = 0;
    alert("in pusher")
  },


  componentDidMount: function() {
      alert("in did")
   this.channel.bind('occasionsAdded', this.occasionsAdded);

   fetch('/holidays',{credentials: 'same-origin'}).then(function(response) {
        return response.json();
    }).then(this.getHolidaysSuccess);

  },
  occasionsAdded: function(occasion) {
       alert("event fired");
       var selectedState=[];
      this.setState({

          selectedState:occasion

      })


      },
  componentWillUnmount: function() {
    // Unbind from channel events
    this.channel.unbind();

    // Unsubscribe from the Pusher channel
    this.pusher.unsubscribe(this.channel);

    // Unregister by assign them to an empty function
    this.getHolidaysSuccess = function() {};

  },


  getHolidaysSuccess: function(response) {

       alert(JSON.stringify(response))

    this.setState({
        holidays: response
    });
  },


  render: function() {
      alert("in render1")

    return (
      <div>
      <Header holidays={this.state.holidays} />
      <OccasionList occasionlist={this.state.selectedState} />
      </div>
    );
  }
});

ReactDOM.render(<App />, document.getElementById("app"));

在标题组件中，我使用状态填充选择框，点击该状态，我的操作绑定到spring控制器，它返回该状态的所有场合的列表并触发事件在上面写的 app.js 中添加了<场> 并更新了场合列表。现在我希望这个列表能够在我的场合孩子中呈现

标题组件

var React=require('react');
var ReactDOM=require('react-dom');
var fetch=require('isomorphic-fetch');
require('es6-promise').polyfill();
import {Button} from 'react-toolbox/lib/button';
import {Dropdown} from 'react-toolbox/lib/dropdown';
import Input from 'react-toolbox/lib/input';
import AppBar from 'react-toolbox/lib/app_bar';
import Navigation from 'react-toolbox/lib/navigation';
import Link from 'react-toolbox/lib/Link';

var Header = React.createClass({
      getOccasion: function(evt) {
          alert(evt.target.value)
            fetch('/holidays/occasion', {
              credentials: 'same-origin',
              method: 'POST',
              headers: {
                'Content-Type': 'application/json'
              },
              body: JSON.stringify({
               state: evt.target.value

             })
            });
          },
  render: function() {
alert("in header")

var state=this.props.holidays.state;
const AppBarTest = () => (
          <AppBar leftIcon='menu'>
            <Navigation type='horizontal'>
            <select onChange={this.getOccasion}>
              <option value="states">States</option>
              {
                  this.props.holidays.map(function(holidays,i) {
                  return <option key={i}
                    value={holidays.state}>{holidays.state}</option>;
                })
              }
            </select>
            </Navigation>
          </AppBar>
        );

    return (
      <div>
      <AppBarTest />
     /* <select onChange={this.getOccasion}>
      <option value="states">States</option>
      {
          this.props.holidays.map(function(holidays,i) {
          return <option key={i}
            value={holidays.state}>{holidays.state}</option>;
        })
      }
    </select>*/





      </div>
    );
  }
});
module.exports.Header = Header;

OccasionList 组件

    var React=require('react');
var ReactDOM=require('react-dom');
var Pusher=require('pusher-js');
/* var fetch = require('node-fetch'); */
var fetch=require('isomorphic-fetch');
require('es6-promise').polyfill();

var OccasionList=React.createClass({


      render: function() {
          alert("in OccasionList")

        return (
          <div>
          this.props.OccasionList.map(function(occasionslist,i)
                  {
              <h1>{occasionslist.images}</h1>
                  })

          </div>
        );
      }

});

module.exports.OccasionList = OccasionList;

截至目前控制进入标题并且没有进行太多计算后，由于标题中的哪个选项框没有加载而我无法选择任何状态，因此会进入候选列表。所以我想要的只是

控制首先应输入app.js，然后应调用第一个子元素标题。
它应该处理header元素并返回到app.js，在状态（从spring控制器获取）中加载新列表，该列表必须传递给Occasionlist元素并处理该子元素。请指导

子组件未按预期呈现

0 个答案: