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

Если вы посмотрите на этот пример на коды и коробки .

Ваш код работает нормально!

Посмотрите, не опечатка ли это или что-то в этом роде.

Также взгляните на ваши типы опор.

Почему по умолчанию hidden равно false, а тип пропеллера string.isRequired?

Возможно, на вашей консоли есть ошибки, и это может вызвать проблемы с defaultProps.

Answer 2

Работает !!проверьте фрагмент кода ниже:

у вас может быть ошибка, потому что вам нужно передать элементы как объект как

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

1. вам нужно импортировать проптипы

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>

Answer 3

Ну, это выглядит хорошо для меня! Может быть, в вашей консоли есть еще одна ошибка?

это то же самое, но не могли бы вы попробовать добавить propTypes и defaultProps внутри компонента, как показано ниже:

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