ReactJS 删除组件

Question

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

Answer 1

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

1) 添加 #your-div-id.hidden { display:none } 样式和 add/remove hidden class 单击（可能不是 React 方式）

2) 更改视图状态（即 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) 如果您简化了您的示例，但实际上您需要 show/hide 而不是 div 另一个页面 - 您应该使用 react-router

Answer 2

我会这样做：

var foo = React.CreateClass({
    getInitialState: function() {
        return {
            showDiv: false, //Or true if you need it displayed immediately on open
        }
    },
    showIt: function() {
        this.setState({showDiv: true});
    },
    hideIt: function() {
        this.setState({showDiv: false});
    },

    render: function() {
        return (<div style={{display: this.state.showDiv ? 'block' : 'none'}}>Your content here</div>);
    }
});

这将在状态更改时执行，div 的样式块将被重新评估。如果 showDiv 状态变量为真，它将显示为块元素。否则它会显示 none。理论上，您也可以使用 CSS 执行此操作。

Here's a jsFiddle 显示这是通过 CSS 类和 div 元素上的样式属性完成的。

ReactJS 删除组件

ReactJS remove component

html

javascript

frontend

reactjs