React defaultProps 不会填充缺少的对象道具

Question

如果我有一个组件，其 propTypes 如下

import React, { Component } from 'react'
import propTypes from 'prop-types'

class MyComponent extends Component {
    ///
}

MyComponent.propTypes = {
    hidden: propTypes.string.isRequired,
    items: propTypes.object,
    attributes: propTypes.array
}

MyComponent.defaultProps = {
    hidden: false,
    items: {},
    attributes: ['baz', 'qux']
}

如果我的组件是这样调用的

<MyComponent hidden={true} items={[value: 'foo', label: 'bar']} />

我希望 props.attributes 填充有 defaultProps 值，因为它的值未定义。这是可以（轻松）实现的事情吗？

Answer 1

如果你看 this example on codesandbox.

您的代码工作正常！

看看是不是错别字之类的。

还要看看你的道具类型。

为什么hidden默认是false，prop type是string.isRequired？

您的控制台可能有错误，这可能会导致 defaultProps 出现问题。

Answer 2

嗯，这对我来说很不错！也许您的控制台中还有另一个错误？

这是一样的，但是您可以尝试像下面这样在组件中添加 propTypes 和 defaultProps 吗：

class MyComponent extends Component {
  static propTypes = {
    ....
  };
    static defaultProps = {
    ....
  };
}

Answer 3

它的工作！，检查下面的代码片段：

您可能会遇到错误，因为您需要将项目作为对象传递为

items: {value: 'foo', label: 'bar'}

您需要导入 proptypes

import PropTypes from 'prop-types';

您需要调用 this.props.attributes 来访问未提供的默认道具

'use strict';

const e = React.createElement;
const propTypes = PropTypes;

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
  console.log(this.props)
    if (this.state.liked) {
      return 'You liked this.';
    }
const props = JSON.stringify(this.props)
    return e('div', null, `I have received these props : ${props}`)
  }
}

MyComponent.propTypes = {
    hidden: propTypes.string.isRequired,
    items: propTypes.object,
    attributes: propTypes.array
}

MyComponent.defaultProps = {
    hidden: false,
    items: {},
    attributes: ['baz', 'qux']
}


const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(MyComponent, {hidden: true ,items: {value: 'foo', label: 'bar'}}), domContainer);

<script src="https://unpkg.com/prop-types@15.6/prop-types.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>


<div id="like_button_container"></div>

React defaultProps 不会填充缺少的对象道具

React defaultProps doesn't fill missing object props

reactjs

react-proptypes