Как размонтировать div, сгенерированный циклом с использованием идентификаторов в React.js?

Question

Я хочу иметь возможность закрыть окно (div) с помощью сгенерированных идентификаторов. Я не понимаю, что именно должно быть внутри.unmountComponentAtNode (ЗДЕСЬ)

Я пробовал

в операторе возврата Box и назначал его в цикле, но ни один из них не сработал.

var React = require('react');
var ReactDOM = require('react-dom');

var Box = React.createClass({
  handleClick: function() {
    ReactDOM.unmountComponentAtNode(document.getElementById(i);
  },

  render: function() {
    var divStyle = {
      textAlign: "center",
      backgroundColor: "transparent",
      border: "solid",
      borderRadius: 2,
      color: "#999999",
      width: 250,
      height: 100,
      display: "inline-block",
      fontFamily: "sans-serif",
      margin: 10,
      padding: 40
    };

    var buttonStyle = {
      float: "right",
      marginTop: -30,
      marginRight: -30,
      cursor: "crosshair",
      color: "#F00",
      border: "1px solid #AEAEAE",
      borderRadius: 30,
      background: "#FFF",
      width: 20,
      height: 20,
      fontSize: 12,
      fontWeight: "bold",
      display: "inline-block"
    };

    return (
      <div style={divStyle}>
        <button onClick={this.handleClick} style={buttonStyle}>x</button>
      </div>
    );
  }
});

var ShowBox = React.createClass({
  render: function() {

    var boxes = [0,1,2,3,4,5,6,7,8];

    var renderData = [];

    for(var i = 0; i < boxes.length; i++) {
      var box = boxes[i];
      renderData.push(<Box id={i} key={i + box} />);
    }

    return (
      <div>
        {renderData}
      </div>
        );
      }
    });

module.exports = ShowBox;

Answer 1

Храните коробки array в state переменная, и создайте Box, используя map передать функцию из родительского компонента в дочерний компонент, чтобы удалить этот компонент onClick кнопки закрытия.

Проблема с тем, как вы делаете, если вы unmount этот компонент по ReactDOM.unmountComponentAtNode(document.getElementById(i);, он снова будет создан, потому что компоненты создаются array и вы не изменили array этот предмет все еще присутствует в array, так что не получится, нужно хранить array в state и удалите запись этого элемента из array чтобы увидеть изменения в UI,

Еще одна вещь, так как вы используете общий style для всех компонентов, так что вместо того, чтобы хранить это в переменной внутри render, храните это глобально и используйте это, это избежит того же самого styling Создание переменной несколько раз и сделать код более читабельным и компактным.

Напишите это так:

var colors = ["#393E41", "#E94F37", "#1C89BF", "#A1D363", "#85FFC7", "#297373", "#FF8552", "#A40E4C", "#33FF00"];

var divStyle = {
      textAlign: "center",
      backgroundColor: "transparent",
      border: "solid",
      borderRadius: 2,
      color: "#999999",
      width: 25,
      height: 20,
      display: "inline-block",
      fontFamily: "sans-serif",
      margin: 10,
      padding: 40
    };

var buttonStyle = {
      float: "right",
      marginTop: -30,
      marginRight: -30,
      cursor: "crosshair",
      color: "#F00",
      border: "1px solid #AEAEAE",
      borderRadius: 30,
      background: "#FFF",
      width: 20,
      height: 20,
      fontSize: 12,
      fontWeight: "bold",
      display: "inline-block"
    };

var Box = React.createClass({
  handleClick: function() {   
       this.props.deleteElement(this.props.id);
  },

  render: function() {
    return (
      <div style={Object.assign({},divStyle,{backgroundColor:colors[this.props.name]})}>
        {this.props.name}
        <button onClick={this.handleClick} style={buttonStyle}>x</button>
      </div>
    );
  }
});

var ShowBox = React.createClass({
  getInitialState: function(){
     return {
         boxes : [0,1,2,3,4,5,6,7,8]
     }
  },
  deleteElement: function(i){
     let boxes = this.state.boxes.slice();
     boxes.splice(i, 1);
     this.setState({boxes});
  },
  renderData(){
     return this.state.boxes.map((box,i)=>{
        return <Box id={i} name={box} key={i} deleteElement={this.deleteElement}/>
     })
  },
  render: function() {
    return (
           <div>
              {this.renderData()}
           </div>
    );
  }
});

ReactDOM.render(<ShowBox/>,document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>