javascript - defaultProps 与逻辑或

Question

我最近开始使用 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 相比，这种方法有什么缺点？

Answer 1

What disadvantages does this approach have in contrast to using defaultProps?

在您的特定代码示例中；没有，因为您只使用每个 Prop 一次。然而，想象一下在许多地方使用特定 prop 的大型应用程序，如果该值是 falsy，则必须手动定义一个“回退值”会变得非常乏味。

再想象一下，如果您突然决定将此值更改为不同的值；然后，您将不得不遍历整个组件并更新使用该特定 Prop 的所有地方。这会使它容易出错。

您的方法的另一个问题是，如果您确实确实希望某个特定 Prop 为假，例如null 或0 。那么您的条件将失败，并且将使用“回退值”。

---

所以基本上，使用 defaultProps 可以让您的 Prop 管理更轻松、更全面、更易于管理。

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