javascript - defaultProps与逻辑或

我最近开始使用react，并且倾向于定义如下默认值:

class TextInput extends Component {
    render() {
        return (
            <input
                type="text"
                name={ this.props.inputName || 'inputName' }
                style={ this.props.inputStyle || {} }
                className={ this.props.inputClass || '' }
            />
        );
     }
}

代替:

class TextInput extends Component {
    render() {
        return (
            <input
                type="text"
                name={ this.props.inputName}
                style={ this.props.inputStyle}
                className={ this.props.inputClass}
            />
        );
     }
}

TextInput.defaultProps = {
    inputName: 'inputName',
    inputStyle: {},
    inputClass: ''
}

与使用defaultProps相比，此方法有哪些缺点？

最佳答案

在您的特定代码示例中；没有，因为您只使用每个 Prop 一次。但是，想象一下在许多地方使用特定 Prop 的大型应用程序，如果值虚假，则必须手动定义“后备值”将变得非常繁琐。

还要想象一下，如果您突然决定将此值更改为其他值；然后，您将必须遍历整个组件，并在使用该特定 Prop 的任何地方进行更新。这会使它容易出错和出错。

方法的另一个问题是，如果您实际上确实要想要某种特定的 Prop 是虚假的，例如null或0。然后，您的条件将失败，而将使用“后备值”代替。

因此，基本上，使用defaultProps可以更轻松，更全面，更易于管理 Prop 。

顺便说一句，供您引用，您使用的逻辑表达式称为Short-circuit evaluation。

关于javascript - defaultProps与逻辑或，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44824667/