如何在 REACT 中为导入的组件设置默认值答案

【问题标题】：How to set default values on imported components in REACT如何在 REACT 中为导入的组件设置默认值
【发布时间】：2018-10-18 15:30:50
【问题描述】：

假设我正在使用从 react-intl 导入的 <FormattedNumber >

它有一个名为minimumSignificantDigits 的属性，所以如果我设置它，我的所有数字看起来都很棒，就像1.00...当您使用货币时非常棒......所以我可以这样使用它： <FormattedNumber minimumSignificantDigits={3} value={somevar}>

我在页面上有大约 100 个这样的属性，我不想在其中的每一个上都设置这个 minimumSignificantDigits 属性，然后当客户改变主意时，我必须更新所有这些属性.

有什么方法可以在我导入该组件时设置/覆盖该组件的一些默认属性。

【问题讨论】：

标签： javascript reactjs ecmascript-6 react-intl

【解决方案1】：

显然是的，对<FormattedNumber> 进行包装

// TreeCharFormattedNumber.jsx
export default TreeCharFormattedNumber = ({ value }) => (
  <FormattedNumber  minimumSignificantDigits={3} value={value}>>
);

// YourComponent.jsx
import TreeCharFormattedNumber from "./TreeCharFormattedNumber";
...
<div>
   <TreeCharFormattedNumber value={myAwsomeValue} />
</div>
...

您也可以将TreeCharFormattedNumber 放在同一个文件中，留下export default

【讨论】：

【解决方案2】：

用另一个包裹导入的组件。

在这个例子中，minimumSignificantDigits 的默认值是 3，其他任何 props 都按原样传递。（如果需要，这允许您还可以覆盖每个组件的默认值）

function FormattedNumberWithDefault(props) {
    return (
       <FormattedNumber minimumSignificantDigits={3} {...props}>
    )
}

【讨论】：

【解决方案3】：

用你自己的组件包装它：

export const MyFormattedNumber = (props) => (
    <FormattedNumber minimumSignificantDigits={3} {...props}>
);

现在您可以在需要时导入它，并且您将传递给MyFormattedNumber 的所有内容都将传递给包装好的FormattedNumber：

<MyFormattedNumber value={3} />

如果传递属性minimumSignificantDigits，您可以轻松覆盖默认值，因为传播道具也可以替换默认道具：

<MyFormattedNumber minimumSignificantDigits={15} value={somevar}>

【讨论】：

【解决方案4】：

我发现以下方法也有效：

import React from 'react'
import {FormattedNumber} from 'react-intl'
import {Link} from 'react-router-dom'

FormattedNumber.defaultProps = {
  style: 'decimal', 
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
}

【讨论】：