未重新呈现子组件

Question

我是新来的反应。作为一个学习练习，我正在构建一个国际象棋应用程序

我想根据父级中的状态更改子级的DOM。当前，在父级组件的状态变化时，子级组件没有变化。

class Game extends Component{
    constructor(){
        super();
        this.state = {
            game :{ 
                board_position = { 'One' : ''}
            }
        }

        this.handleClick = this.handleClick.bind(this);
    }

    handleClick(){
        let p = this.state.game.board_position;

        // some computations on p
        p = { board_position : { 'One' : Math.random() } }

        this.setState({
            game : p
        })

        //this.forceUpdate(); // Just trying different methods to make it work
    }

    render(){
        return(
            <div onClick={(e) => this.handleClick(e) }>
                <Piece {...this.state.game.board_position} />
            </div>
        )
    }
}

Class Piece extends Component{

    constructor(){
        super(props);
        this.state = {
            clr : ''
        }
    }

    componentWillMount(){
        let c;

        // some computations that change value of c based on props
        if( typeof ( this.props.game.one) == number ){
            c = 'Red'
        } else {
            c = 'Blue'
        }


        this.setState({
            clr : c
        })

    }

    render(){
        return(
            <span>{this.state.clr}</span>
        )
    }
}

PS：请忽略任何语法错误。这段代码是实际代码的精简。如果你想看完整的代码，请看这里

Answer 1

piece组件中的componentWillmount只触发一次。

你是否也在每次道具改变时更新你的状态？例如，使用ComponentWillReceiveProps

你也可以直接在渲染函数中显示道具

render(){
    return(
        <span>{use the props directly here}</span>
    )
}

尽可能避免使用state，并坚持仅仅基于道具来呈现您的组件。