时间戳

首页 > 解决方案 > 在 ReactJs 中 defaultProps 是否有效

javascript - 在 ReactJs 中 defaultProps 是否有效

问题描述

我正在关注一个教程，他们设置了一个static object命名defaultprops，并且在设置后它this.props可以在同一个组件中使用，为什么这可能，我的意思是它的功能是什么，static defaultProps它是 React 中的一个内置函数。

class TestComponent extends Component {
    static defaultprops = {
        food: ["goatmeat", "yam"]
    }

    render() {
        let categories = this.props.defaultprops.food.map(foods => {
            return <option key={foods}>{foods}</option>
        });

        let {test} = this.props;

        return (
            <p>
                {this.props.test}
            </p>
        );
    };
}

标签： javascriptreactjsecmascript-6

解决方案

默认 props 很好，因为在将它们传递给组件时不必指定所有 props。顾名思义，它允许您为您的道具设置很好的默认值，即使没有传入覆盖值，也会使用这些默认值。请记住，省略道具将导致使用默认值，而传入 null将导致使用 null 值。

更多信息可以在这里找到。

编辑
要更明确地回答提出的问题：

这是可能的，因为这就是 React 的工作方式。这是为程序员和逻辑方便的内置功能。

对于TestComponent您的示例中的 ，假设它在另一个组件中使用。如果您只使用<TestComponent />，则该组件的food值为["goatmeat","yam"]。但是，您可以随时通过在调用 prop 时传入不同的值来覆盖它。例如，您可以使用<TestComponent food={["cheese", "eggs", "cabbage"]}/>. 这将导致该组件实例的food值为["cheese", "eggs", "cabbage"]。

我认为这也是一个很好的观点，它应该是defaultProps而不是defaultprops因为我相当确定大写很重要，但如果有人想纠正我，我很乐意编辑这一点。

推荐阅读