Question

可以说我正在使用从<FormattedNumber >导入的react-intl

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

我在页面上大约有100个，并且我不想继续在每个属性上设置此minimumSignificantDigits属性，然后当客户改变主意时，我必须更新所有其中

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

Answer 1

用您自己的组件包装：

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

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

<MyFormattedNumber value={3} />

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

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

Answer 2

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

在此示例中，minimumSignificantDigits的默认值为3，而其他任何props均按原样传递。（这使您还可以根据需要覆盖每个组件的默认设置）

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

Answer 3

很明显，在<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

Answer 4

我发现以下内容也适用：

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

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

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

4 个答案: