在写React代码时,避免不了提前想想页面的结构,当然这也属于HTML布局了,比如哪些组件里需要包含哪些组件。遂突发奇想,如果试着把子组件的render内容替换原组件,会是个啥?
比如拿 https://reactjs.org/tutorial/tutorial.html 的例子来试下~
1. Game组件
属性+方法:
this.state.squares; this.handleClick(i);
render():
<div className="game"> <div className="game-board"> <Board squares={current.squares} onClick={(i) => this.handleClick(i)} /> </div> <div className="game-info"> <div>{status}</div> <ol>{}</ol> </div> </div>
包含了一个Board组件,属性有 squares + onClick(i)。我们把Board组件用它的render()替换
2. 用render()替换Board组件
<div className="game"> <div className="game-board"> <div> <div className="board-row"> {this.renderSquare(0)} {this.renderSquare(1)} {this.renderSquare(2)} </div> <div className="board-row"> {this.renderSquare(3)} {this.renderSquare(4)} {this.renderSquare(5)} </div> <div className="board-row"> {this.renderSquare(6)} {this.renderSquare(7)} {this.renderSquare(8)} </div> </div> </div> <div className="game-info"> <div>{status}</div> <ol>{}</ol> </div> </div>
因为this.renderSquare()方法实际上是实例化了Square组件,所以再用Square组件替换this.renderSquare()
3. Square组件替换 this.renderSquare()
<div className="game"> <div className="game-board"> <div> <div className="board-row"> <button className="square" onClick={() => onClick(0)}> {squares[0]} </button> <button className="square" onClick={() => onClick(1)}> {squares[1]} </button> <button className="square" onClick={() => onClick(2)}> {squares[2]} </button> </div> <div className="board-row"> <button className="square" onClick={() => onClick(3)}> {squares[3]} </button> <button className="square" onClick={() => onClick(4)}> {squares[4]} </button> <button className="square" onClick={() => onClick(5)}> {squares[5]} </button> </div> <div className="board-row"> <button className="square" onClick={() => onClick(6)}> {squares[6]} </button> <button className="square" onClick={() => onClick(7)}> {squares[7]} </button> <button className="square" onClick={() => onClick(8)}> {squares[8]} </button> </div> </div> </div> <div className="game-info"> <div>{status}</div> <ol>{}</ol> </div> </div>
是不是已经很熟悉了? ^_^
因为这里的 onClick(i) 是组件Board的属性,再将其替换成Game组件里的 this.handleClick(i)方法,结果如下:
<div className="game"> <div className="game-board"> <div> <div className="board-row"> <button className="square" onClick=this.handleClick(0)> {squares[0]} </button> <button className="square" onClick=this.handleClick(1)> {squares[1]} </button> <button className="square" onClick=this.handleClick(2)> {squares[2]} </button> </div> <div className="board-row"> <button className="square" onClick=this.handleClick(3)> {squares[3]} </button> <button className="square" onClick=this.handleClick(4)> {squares[4]} </button> <button className="square" onClick=this.handleClick(5)> {squares[5]} </button> </div> <div className="board-row"> <button className="square" onClick=this.handleClick(6)> {squares[6]} </button> <button className="square" onClick=this.handleClick(7)> {squares[7]} </button> <button className="square" onClick=this.handleClick(8)> {squares[8]} </button> </div> </div> </div> <div className="game-info"> <div>{status}</div> <ol>{}</ol> </div> </div>
Soga~,原形毕露了!
这样走下来一遍,对React的render()机制大概有个谱,更重要的是理解组件属性的传递过程。
Done!