javascript - ReactJS 删除组件

Question

我正在尝试学习 facebook 的react.js 库的基础知识，最近我一直在思考我可以用它做的一些事情，只是为了习惯它的工作方式。我正在尝试制作一个包含 2 个按钮的 div，一个是“打开”，另一个是“关闭”，当您单击“打开”时， react 将渲染一个包含任何内容的 div(就像一条消息说“您单击了”)，这很好现在但我不知道如何让它在单击“关闭”按钮后消失，有人知道该怎么做吗？谢谢^^

Answer 1

至少有四种方法，这取决于您需要解决的实际问题:

1) 添加 #your-div-id.hidden { display:none } 样式并在点击时添加/删除 hidden 类(可能不是 React 方式)

2) 更改 View 状态(即opened 标志)。这是一种 React 方式，也许是最简单的选择

onOpen() {
  this.setState({ opened: true });
}

onClose() {
  this.setState({ opened: false });
}

render() {
  var div = (this.state.opened) ? (<div>Your Div Content</div>) : undefined;
  return (
    //some your view content besides div
    {div}
  );
}

3) 如果您使用 Flux。将状态移至Store并订阅更改。如果您要在应用程序的许多部分显示 div(即实现可能在应用程序的任何部分显示的错误弹出窗口)，这可能很有用。

所以，首先让我们在商店中保留警告:

var CHANGE_EVENT = 'change';
const warnings = [];

var WarningsStore = assign({}, EventEmitter.prototype, {
  getWarnings: () => return warnings,

  emitChange: () => this.emit(CHANGE_EVENT),

  addChangeListener: callback => this.on(CHANGE_EVENT, callback),

  removeChangeListener: callback => this.removeListener(CHANGE_EVENT, callback)
});

WarningsStore.dispatchToken = AppDispatcher.register(action => {

  switch(action.type) {
    case ActionTypes.ADD_WARNING:
      warnings.push(action.warning);
      WarningsStore.emitChange();
      break;
    case ActionTypes.DISMISS_WARNING:
      _.remove(warnings, {type: action.warningType}); //that's lodash or underscore method
      WarningsStore.emitChange();
      break;
  }
});

我们有了警告存储区后，您可以从 YourView 订阅它，并在每个 AppDispatcher.dispatch({type: ADD_WARNING, warningType: 'Error'}); 上显示弹出窗口；

var YourView = React.createClass({

  componentDidMount: function() {
    WarningsStore.addChangeListener(this._onChange);
  },

  componentWillUnmount: function() {
    WarningsStore.removeChangeListener(this._onChange);
  },

  _onChange() {
    this.setState({ warnings: WarningsStore.getWarnings() });
  },

  render() {
    //if we have warnigns - show popup
    const warnings = this.state.warnings,
          onCloseCallback = () => AppDispatcher.dispatch({type: DISSMISS_WARNING, warningType: warnings[0].warningType});
          popup = (warnings.length) ? <YourPopupComponent warning={warnings[0]} onClose={onCloseCallback}> : undefined;

    return (
      //here the main content of your view
      {popup}
    );
  }

})

4)如果你简化了你的例子，但实际上你需要显示/隐藏另一个页面而不是div - 你应该使用react-router