0

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

这很简单。我有<Parent />一个状态属性和一个处理程序。父级将属性和处理程序都传递给子级。

孩子有一个按钮并调用它自己的处理程序，该处理程序包装了父母的处理程序。一个布尔值 ,isNew被传递给 Parent - Parent 调用this.setState({ isNew: isNew })。

Parent 总是调用render并isNew在 Parent 的 HTML 中输出显示一切都是正确的。但是，<Child isNew={this.state.isNew} />从不输出正确的值this.props.isNew——它总是在 ParentgetInitialProps方法内部的 Parent 中初始化什么值。

我刚进入这个项目，但我不相信我们正在实施 Flux 或 Redux。我的假设是，开箱​​即用的 React应该重新渲染其 props 设置为 parent 的 state 的所有孩子。

换句话说，如果我有以下情况：

React.createClass({
    render: function () {
        return (<Child isNew={this.state.isNew} handler={this.handler} />);
    }
});

当父级 [from a state-change] 重新渲染时，所有依赖父级状态的子级也应该重新渲染，同时将父级的新状态封装在其 props 中；假设一个孩子道具<Child property={this.state.property} />

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

请让我明白这一点:)

谢谢

4

1 回答 1

0

我认为您在子构造函数中设置了 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;

输出：

在父母中真实在孩子中真实在孙子中真实

在父项中为假在子项中为假在孙子中为假

ETC..

于 2016-05-20T17:43:50.937 回答