Question

我是React的新手，请帮助。

我有三个组件<Square / >，<Line / >，<Cell />。

我在<Cell />中的<Line / > - <Line / >中有下一个结构<Square / >

在组件<Square / >中，我有一个按钮，其中包含onClick。

当我点击按钮时，应该再向<Cell />组件添加一个<Line / >组件。

我该怎么做？

对不起，如果它很简单，我只是在学习。感谢

贝娄是我的代码

class Cell extends React.Component {
	render() {
		return (
			<td>
				<div className="square__cell"></div>
			</td>
		);
	}
}



class Line extends React.Component {
	render() {
		return (
			<tr>
				<Cell />
			</tr>
		)
	}
}





class Square extends React.Component {
	render() {
		return (
			<div className="square">
				<table className ="square__table">
					<tbody>
						<Line />
					</tbody>
				</table>

				<button className="square__button square__button_append square__button_col-append"
						onClick={()=>{alert(1)}}>
				</button>

			</div>
		);
	}
}





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 />

如何影响React中的另一个组件（动态添加子项）

1 个答案: