儿童组件没有被重新渲染

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>
        )
    }
}

在句柄呼叫点击方法上，游戏状态发生了变化。但是，未看到随后的儿童变化。

有人可以帮我吗？我要去哪里？

我不确定如何按照此处的建议实现REF。但是，我认为这不是一个很好的解决方案。可能我有一些概念上的误解。

ps：请忽略任何语法错误。该代码是真实代码的条纹。如果您想查看完整代码 - 请访问

Answer 1

Piece中的 componentWillMount只能发射一次。

您每次道具都会更新状态吗？例如使用componentWillReceiveProps

您也可以直接在渲染功能中显示道具

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

尽可能避免使用状态，并坚持基于道具渲染组件。

Answer 2

这是一个非常基本的反应过程：

class Game extends Component{
    constructor(){
        super();
        this.state = {
            game :{ 
                 board_position = { 'One' : ''}
             }
        }
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick(e){
        let p = this.state.game.board_position;
        // some computations on p
        p = { board_position : { 'One' : Math.random() } }
        this.setState({
            game : p
        })
    }
    render(){
        return(
        <div onClick={this.handleClick}>
            <Piece board_position={this.state.game.board_position} />
        </div>
        )
    }
}

孩子：//可以是一个函数，而不是类

const Piece = ({board_position}) =>{
  const {board_position} = this.props;
  let clt = board_position;
  //do some stuff
  return(
    <span>{board_position}</span>
  );
};

如果要进行更多计算，则可以使用componentwillreceiveprops（newprops）

Answer 3

当组件是 props >或状态时，组件重新渲染。将根据 props 和自己状态的值来调用某些生命周期方法。

您访问** props 的方式是错误的。**应该是

this.props.One

生命周期方法您应该使用的是 ComponentWillReciveProps（NextProps）。在这种情况下，您应该访问如下

的相关道具

nextProps.One

我创建了一个工作小提琴（如果您修复了这些问题并查看您的日志，您的代码有错误，您可以很容易地弄清楚该错误在哪里）