es6组件中调用es5组件,不会触发es5组件中的componentWillReceiveProps方法?



    • 问题: RT
    • 情景:组件a是es6语法,组件b是es5语法。a中调用b,并向b中传入参数name。在a的 componentDidMount方法中延时更新a的name,此时b的componentWillReceiveProps方法没有被触发。但如果组件b使用es6语法就能触发componentWillReceiveProps方法。
    • 是es6的constructor 和es5的getInitialState的实现方式不同造成的吗?求教。~~~~

  • administrators

    说那么多 不如直接贴代码



  • @sunnylqm 谢谢回复,问题找到了,不是我说的原因。下面这样是没问题的,会触发B和C的更新,与语法无关....
    A组件:

      constructor(props) {
        super(props);
        this.state = {
          data:{'name':'小怪兽'}
        };
      }
      componentDidMount() {
        this.upFn()
      }
      upFn() {
       let data = {'name':'凹凸曼'}
       setTimeout(() => {
         console.log('开始更新');
         this.setState({
           data: data
         })
       },3000)
     }
     render() {
        
          return (
            <View>
              <B name={this.state.data.name}/>
              <C name={this.state.data.name}/>
            </View>
          )
      }
    

    B组件:

      constructor(props) {
        super(props);
        this.state = {
          name: this.props.name
        };
      }
      componentWillReceiveProps(nextProps) {
        if (nextProps.name != this.props.name) {
          this.setState({
            name: nextProps.name
          })
        }
      }
    
      render() {
        return (
          <View>
          <Text>Component B: {this.state.name}</Text>
          </View>
        );
      }
    

    C组件:

     getInitialState: function() {
            return {
                name: this.props.name,
            };
        },
      componentWillReceiveProps(nextProps) {
         if (nextProps.name != this.props.name) {
           this.setState({
             name: nextProps.name
           })
         }
      },
      render: function(){
        return(
          <View>
          <Text>Component C: {this.state.name}</Text>
          </View>
        );
      }
    

    暂且找到的原因是 react-native-tabbar 组件,如下写法就不会触发B(componentWillReceiveProps)里的更新....
    D组件

    constructor(props) {
        super(props);
        this.state = {
          data:{'name':'小怪兽'}
        };
      }
      componentDidMount() {
        this.upFn()
      }
      upFn() {
       let data = {'name':'凹凸曼'}
       setTimeout(() => {
         this.setState({
           data: data
         })
       },3000)
     }
    
    render() {
        return (
            <Tabbar ref="myTabbar" barColor={'rgb(0, 0, 0)'}>
                <Tab name="赛事">
                  <IconWithBar label='赛事' onInactiveColor={'white'} onActiveColor={'red'} type={glypy.Match} ontype={glypy.MatchOn} from={'tabbaricon'}/>
                  <RawContent>
                      <View>
                         /*但如果这里直接写<A />,并把D中设置data 和更新data的方法去掉,就又能更新B了......不知道啥原因*/
                        <B name={this.state.data.name}/>
                      </View>
                  </RawContent>
                </Tab>
            </Tabbar>
        )
    }
    

登录后回复