1

I want to be able to close the box(div) by using generated id's. I am confused as to what exactly should be inside .unmountComponentAtNode(HERE)

I've tried < div id={i} style={divStyle}> in the return statement of Box and assigning it in the loop, but neither have worked.enter image description here

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;
4

1 回答 1

1

将框存储array在state变量中，并使用创建框map，将函数从父组件传递给子组件以删除onClick关闭按钮的该组件。

你正在做的问题unmount是，如果你是那个组件ReactDOM.unmountComponentAtNode(document.getElementById(i);，它将再次被创建，因为组件是由创建的array并且你没有更改array，那个项目仍然存在array，所以它不起作用，你需要存储arrayinstate并从中删除该元素的条目以array查看UI.

还有一件事，由于您style对所有组件都使用了 common，因此与其将其存储在变量内部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'/>

于 2017-03-27T06:32:54.137 回答