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类型为string.isRequired？

您的控制台上可能有错误，并且可能导致defaultProps出现问题。

Answer 2

嗯，这对我来说很好！控制台中可能还有另一个错误？

这是相同的，但您是否可以尝试在组件内部添加propTypes和defaultProps，如下所示：

DECLARE @date varchar(50) = '06/26/2019'
DECLARE @timespan varchar(8) = '10:29:30'

SELECT CAST(@date AS DATETIME) + CAST(@timespan AS DATETIME)

Answer 3

工作正常！，请检查以下代码段：

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

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

您需要导入原型

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不会填充缺少的对象道具

3 个答案: