react中的子组件...props传参的报错限制

我们通常封装组件，会看到使用{...props}来传递子组件B从父组件A接收到的属性给孙子组件C（剩余父组件属性传递给孙子组件的属性），那么，是否意味着只要子组件{...props}后，子组件就可以直接使用该属性呢？

答案是否定的，{...props}只能在当前组件没有用到时，将子组件从父组件接收到的属性传递给孙子组件，如果直接使用未定义的属性，则会报错！

// 父组件A

 index + ""}
          onChange={() => {}}
          initialPage={currKey}
          // page={'0'}
          showUnderline={true}
          tabBarTextStyle={
    { fontSize: OASize(14) }}
          tabBarActiveTextStyle={
    { fontSize: OASize(20), fontWeight: "bold" }}
          tabBarActiveTextColor={OAColor.headBg}
          tabBarBackgroundColor={OAColor.white}
          renderContent={(tab, index) => {
            return {this.renderTab(tab.title)};
          }}
          tabBarInactiveTextColor={OAColor.lightText}
          tabBarUnderlineStyle={
    {
            backgroundColor: OAColor.headBg,
            width: "35%",
            height: OASize(2),
            marginBottom: 5
          }}
        />

 

 // 子组件B

            firstLoading != null ? (
              firstLoading === false ? (
                 (
                    
                  )}
                  {...props}
                  {..._props}
                />
              ) : null
            ) : (
               (
                  
                )}
                {...props}
                {..._props}
              />
            )
          }
          {..._props}
        >
          {renderContent}
        

 // 孙子组件C

render() {
    const {
      style,
      title,
      active,
      badge,
      tabBarTextStyle,
      tabBarActiveTextColor,
      tabBarActiveTextStyle
    } = this.props;
    console.log("tabBarActiveTextStyle:", tabBarActiveTextStyle);
    return (
      
        
          {title}
        
        {!active && !!badge && (
          
        )}
      
    );
  }