Question

我有以下React MUI Switch组件，它会在道具checked = {this.state.checked}上更改其ui状态

class Switch extends Component {
    state = { 
      active : this.props.contData.statesValue.active,
      checked: false
     }
    render() { 
        const { classes, theme } = this.props; 
        return ( 
            <MuiSwitch checked={this.state.checked}/>      
        )
    }
}

开关期望被检查的道具为字符串'true' | 'false'。

我正在尝试使用活动状态this.props.contData.statesValue.active来设置检查的道具，但是，它以bool 0 1的形式接收，当以checked={this.state.active}的形式传递到Switch道具时会导致错误

道具类型失败：提供给checked的道具SwitchBase无效。

所以我的问题是如何将传入的活动道具从0 1更改为字符串'true' | 'false'在呈现组件之前。以前，我本来希望使用componentWillReceiveProps方法，但由于现在已弃用该方法，因此欢迎提供任何有关如何实现此方法的指针。

Answer 1

MUI's Switch可以在v1.0 +版本的checked道具中使用字符串或布尔值。

在这种情况下，我们使用经过尝试和真实的!!双重否定将状态初始化时的prop转换为布尔值：

class Switch extends Component {
    state = { active: !!this.props.contData.statesValue.active };

    render() { 
        return <MuiSwitch checked={this.state.active}/>;
    }
}

Answer 2

如果道具以整数（0或1）形式出现，则可以执行此技巧（hack？）：

render () {
  // [...]

  const checked = `${Boolean(this.props.contData.statesValue.active)`}
  // const checked = `${this.props.contData.statesValue.active}` // if it's true or false

  return ( 
    <MuiSwitch checked={checked} />      
  )
}

Answer 3

“材料”用户界面中的Switch#checked也接受布尔值。

如果没有其他原因在组件中保留checked状态，只需将其从props传递到Switch，如下所示：

class Switch extends Component {
    render() {
        return ( 
            <MuiSwitch checked={this.props.contData.statesValue.active === 1}/>      
        )
    }
}

在渲染之前改变从道具派生的状态

3 个答案: