Question

在React的官方tutorial（tic tac toe）中，使用了三个组件：Game，Board和Square。

游戏包含一个squares数组，可以包含X，O和null：这三个都是原始类型。

我的问题：使用es6类（不扩展组件因为没有渲染任何东西）来保持信息原语肯定是不能容纳的公认的做法吗？这些类也可以从其他类继承。

例如，我们可以将Piece类的对象存储在squares数组中，而不是将X / O显示在广场中的piece.name吗？我们可以将piece从i移到j以在广场上反映出来吗？

需要问这个有两个原因：

几乎所有React示例都围绕组件展开。我还没有看过其他用过的课程。
不鼓励对组件（composition vs inheritance）进行继承，我认为在上面的示例中需要对Piece类进行专门化。

感谢。

Answer 1

这是我正在谈论的一个例子。我没有包含任何状态更新机制，这是相当概念性的，但我认为你会得到这个要点。

// holds the state of your board and calculates the view layer
class Board extends PureComponent {
    constructor( props ) {
        super( props );

        // create pieces for however you want the game to start
        this.pieces = {
            p1: new piece( "Lumberjack" ),
            p2: new piece( "Lumberjack" ),
            p3: new piece( "Lumberjack" ),
            p4: new piece( "Tree" ),
            p5: new piece( "Tree" ),
            p6: new piece( "Tree" )
        }

        // flatten for easy and speed of access
        const { p1, p2, p3, p4, p5, p6 } = this.pieces;

        // initial state, this is what gets updated by this.setState method
        // to update the rendered view
        this.state ={
            squares: [
                [ p1, p2, p3 ],
                [ null, null, null ],
                [ p4, p5, p6 ]
            ]
        };
    }

    // render method that produces the view
    render() {
        const { squares } = this.state;
        const iLength = squares.length;
        let i, j jLength, components = [ ];

        // generate the Squares from this.state data
        for ( i = 0; i < iLength; i++ ) {
            jLength = squares[ i ].length;
            for ( j = 0; jLength; j++ ) {
                components.push( <Square piece={ squares[ i ][ j ] } /> );
            }
        }

        // render the Squares containing the pieces
        return (
            <div className="board">
                { components }
            </div>
        );
    }
}

// piece constructor
function piece( name ) {
    this.name = name;
}

你最终在棋盘上有9个方格。一方面是Lumberjacks，中间方面很清楚，而另一边则是那么害怕的Tree's。

使用除组件之外的es6类（React Js）

1 个答案: