子组件没有被重新渲染

Question

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

我想根据父级的状态更改子级的 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>
        )
    }
}

在调用手柄点击方法时，游戏状态发生了变化。但是，看不到 Child 的后续变化。

谁能帮帮我？我哪里错了？

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

PS：请忽略任何语法错误。此代码是真实代码的精简版。 如果您想查看完整代码 - go over here

Answer 1

Piece 组件中的componentWillMount 只会触发一次。

您是否也在每次道具更改时更新您的状态？例如使用componentWillReceiveProps

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

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

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

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

Child: //可以是一个函数而不是一个类

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 或 states 发生变化时重新渲染。会根据 props 和 own states 的值调用某些生命周期方法。

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

this.props.One

你应该使用的生命周期方法是 componentWillReciveProps(nextProps)。在这种情况下，您应该像下面这样访问相关的道具

nextProps.One

我已经创建了一个有效的fiddle（如果你修复了这些代码有错误并查看了你的日志，你可以很容易地找出错误在哪里）