字节跳动 改变子组件状态后不更新

[Infiee]

问题描述

改变子组件属性，视图可以刷新子组件值，但样式不会更新

复现步骤

代码如下，父组件代码:

export default class Index extends Component {
  config = {
    navigationBarTitleText: "首页"
  };
  constructor() {
    this.state = {
      showModal: false
    };
  }
  componentDidShow() {
    let self = this;
    setTimeout(() => {
      console.log("开始赋值");
      self.setState(
        {
          showModal: true
        },
        () => {
          console.log("赋值:", self.state);
        }
      );
    }, 3000);
  }
  render() {
    const {showModal} = this.state
    return (
      <View className='index'>
        <Text>Hello world!</Text>
        <View className='c'>
          <SubCom show={showModal} />
        </View>
      </View>
    );
  }
}

子组件代码:

export default class SubCom extends Component {
  constructor(props) {
    super(props);
    console.log("父组件传值parms :", props);
    this.state = {
      // eslint-disable-next-line react/no-unused-state
      open: props.show
    };
  }

  componentWillReceiveProps(nextProps) {
    console.error("prop ------->", nextProps);
  }

  render() {
    const cls = classnames("testCls", {
      active: this.props.show
    });
    return (
      <View className='page-wrap'>
        <View style='width:200px;height:200px;background-color: #ffaa01;'>
          <View>props.open: {this.props.show}</View>
          <View
            style={
              this.props.show ? 'background:red' : 'background:green'
            }
            className={cls}
          >
            修改的class: {this.props.show}
          </View>
        </View>
      </View>
    );
  }
}

期望行为
期望子组件背景绿色变为红色，classname变为active

报错信息

系统信息

Taro v1.2 及以上版本已添加 taro info 命令，方便大家查看系统及依赖信息，运行该命令后将结果贴下面即可。

• 操作系统: mac os
• Taro 版本: 1.2.26
• Node.js 版本: v11.10.1
• 报错平台: [tt]

  Taro CLI 1.2.26 environment info:
    System:
      OS: macOS 10.14.2
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 11.10.1 - /usr/local/bin/node
      Yarn: 1.9.4 - /usr/local/bin/yarn
      npm: 6.9.0 - /usr/local/bin/npm
    npmPackages:
      @tarojs/components: 1.2.26 => 1.2.26 
      @tarojs/plugin-babel: ^1.2.26 => 1.2.26 
      @tarojs/plugin-csso: 1.2.25 => 1.2.26 
      @tarojs/plugin-uglifyjs: 1.2.25 => 1.2.26 
      @tarojs/router: 1.2.26 => 1.2.26 
      @tarojs/taro: 1.2.26 => 1.2.26 
      @tarojs/taro-alipay: 1.2.26 => 1.2.26 
      @tarojs/taro-h5: 1.2.26 => 1.2.26 
      @tarojs/taro-swan: 1.2.26 => 1.2.26 
      @tarojs/taro-tt: ^1.2.26 => 1.2.26 
      @tarojs/taro-weapp: 1.2.26 => 1.2.26 
      @tarojs/webpack-runner: 1.2.25 => 1.2.26 
      eslint-config-taro: 1.2.25 => 1.2.26 
      eslint-plugin-taro: 1.2.25 => 1.2.26 
      nervjs: ^1.3.13 => 1.3.13 

补充信息
[可选]
[根据你的调查研究，出现这个问题的原因可能在哪里？]

子组件 componentWillReceiveProps 这个生命周期未触发更新

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[Infiee]

已测试 1.3.0-beta.0 这个版本运行上述代码可以成功触发componentWillReceiveProps这个属性和改变背景颜色，感谢 ：）