JavaScript | ReactJS：父状态 - 更改未触发儿童道具更新

Question

父setState触发器render()，但子组件的道具是静态的

这非常简单。我有一个{-1}}状态属性和一个处理程序。父对象将属性和处理程序传递给子进程。

子进程有一个按钮并调用自己的处理程序，该处理程序包装了Parent的处理程序。布尔值<Parent />传递给Parent - Parent调用isNew。

父总是调用this.setState({ isNew: isNew })并在Parent的HTML中输出render显示一切正确。但是，isNew永远不会从<Child isNew={this.state.isNew} />输出正确的值 - 它总是在Parent的this.props.isNew方法内的Parent中初始化的值。

我刚刚进入这个项目，但我不相信我们正在实施Flux或Redux。我的假设是React，开箱即用，应该重新渲染所有道具设置为父级状态的孩子。

换句话说，如果我有以下内容：

getInitialProps

当父级重新呈现[来自状态变化]时，所有依赖父级状态的子项也应该在将父级的新状态封装在其道具中时重新渲染;假设儿童道具为React.createClass({ render: function () { return (<Child isNew={this.state.isNew} handler={this.handler} />); } });

我完全错过了一些基本的东西吗？

请直截了当地说明：）

THX

Answer 1

我想你在子构造函数中设置this.props.isNew并尝试打印它..

大孩子：

import React, { Component } from 'react';

class GrandChild extends Component {
  constructor(props) {
    super(props);
    this.toogle = this.toogle.bind(this);
  }

  toogle(e) {
    if (e) {
      e.preventDefault();
    }
    this.props.toogleParent(!this.props.isNew);
  }

  render() {
    console.log('in grand child', this.props.isNew);
    return (
      <div>
        <a onClick={this.toogle} href="">click</a>
      </div>
    );
  }
}

export default GrandChild;

子组件：

import React, { Component } from 'react';
import GrandChild from './grand';


class Child extends Component {
  render() {
    console.log('in child', this.props.isNew);
    return (
      <div>
        <GrandChild {...this.props} />
      </div>
    );
  }
}

export default Child;

父组件：

import React, { Component } from 'react';
import Child from './child';

class MainPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isNew: false
    };
    this.toogleParent = this.toogleParent.bind(this);
  }

  toogleParent(isNew) {
    this.setState({ isNew });
  }

  render() {
    console.log('in parent', this.state.isNew);
    return (
      <div>
        <h3>Main page</h3>
        <Child isNew={this.state.isNew} toogleParent={this.toogleParent} />
      </div>
    );
  }
}

export default MainPage;

输出：

  

在父级中   在孩子真实   在盛大的孩子真实

     

在父虚假中   在孩子假   在大孩子假的

     

等。