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

随着手柄点击方法的调用，游戏状态发生变化。但是，没有看到儿童的后续变化。

任何人都可以帮帮我吗？我哪里错了？

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

PS：请忽略任何语法错误。这段代码是真正的代码。如果您想查看完整代码 - go over here

Answer 1

您

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<table id="ttx">
  <tbody id="201801">
  <tr><th colspan="2">Jan-2018</th></tr>
  <tr><td>Buy</td><td>23,000</td></tr>
  <tr><td>Sell</td><td>10,250</td></tr>
</tbody>

<tbody id="201712">
  <tr><th colspan="2">Dec-2017</th></tr>
  <tr><td>Buy</td><td>20,000</td></tr>
  <tr><td>Sell</td><td>12,500</td></tr>
</tbody>

<tbody id="201711">
  <tr><th colspan="2">Nov-2017</th></tr>
  <tr><td>Buy</td><td>10,000</td></tr>
  <tr><td>Sell</td><td>8,750</td></tr>
</tbody>

</table>

组件中的

componentWillMount只会触发一次。

每次道具改变时你都在更新你的状态吗？例如，使用Piece

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

componentWillReceiveProps

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

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

当道具或状态更改时，组件会重新呈现。将根据道具和自身状态的值调用某些生命周期方法。

您访问**道具的方式是错误的。** 它应该是

this.props.One

您应该使用的生命周期方法是 componentWillReciveProps（nextProps）。在这种情况下，您应该访问相关的道具，如下所示

nextProps.One

我创建了一个有效的fiddle（如果您修复了这些代码并查看了您的日志，您可以轻松找出错误的位置，那么您的代码就会出错）

子组件未被重新渲染

3 个答案: