如何影響React中的另一個組件（動態添加子項）

Question

我是React中的新成員，請幫助。

我有三個組件<Square/>,<Line/>,<Cell />。

而且我有一個結構<Cell />在<Line/> - <Line/>在<Square/>

在組件<Square/>我有一個按鈕，並在其onClick。

當我單擊按鈕時，應該在<Line/>組件上再添加一個<Cell />組件。

我該怎麼辦呢？

對不起，如果很簡單，我只是在學習。 感謝

貝婁是我的代碼

class Cell extends React.Component { 
 
\t render() { 
 
\t \t return (
 
\t \t \t <td> 
 
\t \t \t \t <div className="square__cell"></div> 
 
\t \t \t </td> 
 
\t \t); 
 
\t } 
 
} 
 

 

 

 
class Line extends React.Component { 
 
\t render() { 
 
\t \t return (
 
\t \t \t <tr> 
 
\t \t \t \t <Cell /> 
 
\t \t \t </tr> 
 
\t \t) 
 
\t } 
 
} 
 

 

 

 

 

 
class Square extends React.Component { 
 
\t render() { 
 
\t \t return (
 
\t \t \t <div className="square"> 
 
\t \t \t \t <table className ="square__table"> 
 
\t \t \t \t \t <tbody> 
 
\t \t \t \t \t \t <Line /> 
 
\t \t \t \t \t </tbody> 
 
\t \t \t \t </table> 
 

 
\t \t \t \t <button className="square__button square__button_append square__button_col-append" 
 
\t \t \t \t \t \t onClick={()=>{alert(1)}}> 
 
\t \t \t \t </button> 
 

 
\t \t \t </div> 
 
\t \t); 
 
\t } 
 
} 
 

 

 

 

 

 
ReactDOM.render(
 
    <Square />, 
 
    document.getElementsByTagName('div')[0] 
 
);

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

Answer 1

您希望您的組件的共同祖先舉辦一些國家定義的細胞（在片段下面我用簡單的字符串）。然後，國家就被這個組成部分單獨改變，必要時給予其子女回電。請注意，我在每個setState上構造一個全新的列表，並且不要只更改狀態對象。這是React的核心概念，在嘗試更復雜的事情之前，您應該對它感到滿意。

然後你希望你的組件呈現給你的孩子和/或能夠呈現一個列表。在這裏，我決定把它放在Square中，但最好將<Line>的列表渲染出來。在我的片段中，Line是完全沒有必要的。

class Cell extends React.Component { 
 
    render() { 
 
    return (<td> 
 
     <div className = "square__cell" >{this.props.children}</div> </td> 
 
    ); 
 
    } 
 
} 
 

 
class Line extends React.Component { 
 
    render() { 
 
    return (<tr>{this.props.children}</tr>) 
 
    } 
 
} 
 

 
class Square extends React.Component { 
 
    constructor(props){ 
 
    super(); 
 
    this.state = {cells : []} 
 
    } 
 
    addCell(){ 
 
    let oldCells = this.state.cells, 
 
     cells = oldCells.concat(["cell-" + oldCells.length]); 
 
    this.setState({cells}); 
 
    } 
 
    render() { 
 
    return (
 
    <div className = "square" > 
 
     <table className = "square__table" > 
 
     <tbody > 
 
      <Line> 
 
      {this.state.cells.map(
 
       (cellName) =>{return <Cell>{cellName}</Cell>;} 
 
      )} 
 
      </Line> 
 
     </tbody> 
 
     </table> 
 

 
     <button className = "square__button square__button_append square__button_col-append" 
 
     onClick = {() =>this.addCell()} >add a cell</button> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 

 
ReactDOM.render(< 
 
    Square/> , 
 
    document.getElementsByTagName('div')[0] 
 
);

.square { 
 
    background-color: #EEE; 
 
}

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