Question

我希望能够使用生成的ID关闭框（div）。我很困惑究竟应该在里面.unmountComponentAtNode（HERE）

我试过＆lt; div id = {i} style = {divStyle}＆gt; 在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创建Box，将一个函数从Parent组件传递给子组件，以删除该组件onClick按钮。

问题与您的工作方式一样，如果您unmount组成ReactDOM.unmountComponentAtNode(document.getElementById(i);，则会再次创建它，因为组件是由{{1}创建的并且您没有更改array，该项目仍然存在于array中，因此无法使用，您需要将array存储在array中从state中删除该元素的条目，以查看array。

中的更改

还有一件事，因为您对所有组件使用了通用UI，因此不是将其存储在style内的变量中，而是将其全局存储并使用它，它将避免相同的render变量创建多次，使代码更具可读性和紧凑性。

像这样写：

＆＃13;

styling

＆＃13;

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'))

＆＃13;

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

1 个答案: