React.jsのIDを使ってループによって生成されたdivをアンマウントするにはどうすればいいですか？

Question

生成されたIDを使用してボックス（div）を閉じることができるようにします。私は私が試した

.unmountComponentAtNode（HERE）内にある必要があります正確に何をするなど混乱しています<のdivのid = {I}スタイル= {divStyle}>ボックスの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

ストアstate変数でのボックスarray、およびmapを使用してボックスを作成し、閉じるボタンのコンポーネントonClickを削除するには、子コンポーネントに親コンポーネントから関数を渡します。コンポーネントがarrayによって作成され、あなたがarrayを変更していないので、あなたunmountReactDOM.unmountComponentAtNode(document.getElementById(i);ことで、そのコンポーネントは、それが再び作成されます場合は、あなたがやっている方法と

問題はまだそのアイテム、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'/>