Comment est-ce que je démonte une div générée par une boucle en utilisant des id dans React.js?

Question

Je veux être en mesure de fermer la boîte (div) en utilisant les ID générés. Je suis confus quant à ce exactement devrait être à l'intérieur .unmountComponentAtNode (ICI)

J'ai essayé < div id = {i} style = {} divStyle> dans la déclaration de retour de la boîte et l'affectation dans la boucle, mais aucun n'a travaillé.

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

Stocker les boîtes array dans la variable state et créer la boîte en utilisant map, passer une fonction du composant parent au composant de l'enfant à supprimer ce composant onClick du bouton de fermeture.

Problème avec la façon dont vous faites est, si vous unmount ce composant par ReactDOM.unmountComponentAtNode(document.getElementById(i);, il sera à nouveau obtenir créé parce que les composants sont créés par le array et vous ne changeaient pas la array, cet élément toujours présent dans array , donc cela ne fonctionnera pas, vous devez stocker le array dans state et supprimer l'entrée de cet élément de array afin de voir les changements dans UI.

Une chose, puisque vous utilisez le style commun pour tous les composants ainsi au lieu de stockage que variable à l'intérieur render, rangez-le dans le monde et l'utiliser, il évitera les mêmes styling création de variable plusieurs fois et faire la code plus lisible et compact.

écrire comme ceci:

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