Question

我想用ReactJS动态更改网页内容：

在我的store.html中：

<div className="row stores">
  <div id="Stores">
    <%= react_component('Stores') %>
  </div>

  <div id="Accordion-Store">
    <%= react_component('StoreAccordion') %>
  </div>
</div>

当用户加载页面store.html时，只有商店react_component（＆＃39;商店＆＃39;）可见。 react_component StoreAccordion被隐藏（使用css display：none）。

// store_list.js.jsx
var StoreList = React.createClass({
  getInitialState: function() {
    return { showAccordionStore: false };
  },
  onClick: function() {
    this.setState({ showAccordionStore: true });
  },
  render: function() {
    return(
      <ul className="stores">
        <li id="Aarau"><a onClick={this.onClick}>Aarau</a></li>
        <li id="Bern"><a onClick={this.onClick}>Bern</a></li>
        <li id="Chur"><a onClick={this.onClick}>Chur</a></li>
      </ul>
    );
  }
});

当用户点击像Aarau这样的ul.stores（在store_list.js.jsx中）的li元素时，store_accordion.js.jsx可见，并且手风琴的特定li打开。这意味着要附加css类＆＃34; is-active＆＃34;像li.accordion-item一样

// store_accordion.js.jsx
var StoreAccordion = React.createClass({
  getInitialState: function() {
    return { openAccordion: false };
  },
  emptyList: function() {
    return(
      <p>no stores available.</p>
    );
  },
  renderStoreAccordion: function() {
    return(
      <div className="row accordion-stores" style={{display: this.state.showAccordionStore ? 'block' : 'none'}}>
      <div className="accordion-account">
        <ul id="accordion-nile" className="accordion" data-accordion data-allow-all-closed="true" role="tablist">
          <li id="aarau" className="accordion-item {{display: this.state.openAccordion ? 'is-active' : ''}}" data-accordion-item data-allow-all-closed="true" role="tablist">Aarau</li>
          <li id="bern" className="accordion-item {{display: this.state.openAccordion ? 'is-active' : ''}}" data-accordion-item>Bern<li>
            <li id="chur" className="accordion-item {{display: this.state.openAccordion ? 'is-active' : ''}}" data-accordion-item>Chur</li>
        </ul>
      </div>
      </div>
    );
  },
  renderStore: function() {
    if (this.state.openAccordion === true) {
      return this.renderStoreAccordion();
    } else {
      return this.emptyList();
    }
  },
  render: function() {
    return this.renderStore();
  }
});

我有两个问题：

1）如何将变量showAccordionStore从store_list.js.jsx传递到store_accordion.js.jsx以显示/隐藏css样式display：none

2）当从store_list.js.jsx点击store_accordion.js.jsx中的accordion li时，如何传递store_list的li元素的id？例如当用户点击Aarau时，相应的手风琴li应该得到css类is-active：阿劳

当我第一次加载页面时，将呈现store_list.js.jsx，但不是手风琴，这是好的。但是在点击商店列表项后，仍然不会呈现手风琴。为什么会这样以及如何解决它？

===编辑

在Chrome控制台中，我收到此错误：

未捕获的不变违规：_registerComponent（...）：目标容器不是DOM元素。

React.js：在两个组件之间传递数据，以显示手风琴菜单不起作用

0 个答案: