Question

我有一堆功能反应UI组件。我想将defaultProps设置为这些组件。但是，似乎我的组件不应用这些默认道具。这是一个示例代码：

// @flow
import React from 'react'
import classNames from 'classnames/bind'

type LabelType = 'default' | 'narrow' | 'wide'

const Label = (
  props: {
    text: string,
    type: LabelType,
  }
) => {
  const { text, type } = props
  const labelClass = classNames(
    'c-label',
    `c-label--${type}`
  )

  return (
    <div className={labelClass}>
      {text}
    </div>
  )
}

Label.defaultProps = {
  type: 'narrow',
}

export default Label

我得到的结果是CSS类c-label--undefined。如果我在对象解构期间传递默认值，const { type = 'narrow' }它可以正常工作。当我将功能组件转换为基于类的组件时，上面的代码也适用。

我已经研究了很多这个问题，但我还没有找到解决方案。当然，我可以在解构期间传递默认值，但是更难以阅读，我的公司希望采用我所描述的模式。我已经看到一些文章描述可以将defaultProps传递给功能组件但是可能已经改变了？我将不胜感激任何建议。

Answer 1

我很确定你的代码应该可行。我自己检查了一下。如果未作为道具传递，类型具有默认值。也许问题出在你使用组件的地方？

Answer 2

好的，经过一些研究后看来，由于对rails的反应，defaultProps在这个设置中不起作用。我们将它用于服务器端渲染。希望这对那些可能处于类似情况的人有所帮助

在React中的功能组件上设置defaultProps

2 个答案: