React（動的に子供を追加）の別のコンポーネントに影響する方法

Question

私はReactで新しいです、助けてください。

私は3つの成分を持っています。<Square/>、<Line/>、<Cell />です。

そして私は<Line/>に次構造<Cell />を持っている - 私はそれでボタンとonClickを持つコンポーネント<Square/>で<Square/>

に<Line/>。

ボタンをクリックすると、<Cell />コンポーネントが<Line/>コンポーネントに追加されます。

どうすればいいですか？

申し訳ありませんが、単純ならば、私は学んでいます。 おかげ

ベローは、あなたがあなたの部品の共通の祖先は、セルを定義するいくつかの状態を保持したい私のコード

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