如何使用 React.js 中的 id 卸载由循环生成的 div？

Question

我希望能够使用生成的 ID 关闭框 (div)。我对 .unmountComponentAtNode(HERE)

中到底应该包含什么感到困惑

我已经试过了

在 Box 的 return 语句中并在循环中分配它，但都没有工作。

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 变量中，并使用 map 创建盒子，将一个函数从父组件传递到子组件以删除该组件 onClick的关闭按钮。

问题你正在做的事情是，如果你 unmount 这个组件是 ReactDOM.unmountComponentAtNode(document.getElementById(i);，它会再次被创建，因为组件是由array 而你没有更改 array，那个项目仍然存在于 array，所以它不起作用，你需要将 array 存储在 [=13] =] 并从 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'/>

如何使用 React.js 中的 id 卸载由循环生成的 div？

How do I unmount a div generated by a loop using id's in React.js?

javascript

unmount

reactjs