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

假设我正在使用从

react intl

导入的

它有一个名为

minimumsignifictdigits

的属性，因此如果我设置它，我所有的数字看起来都像

1.00

。。。当你在使用货币时，感觉很棒。。所以我可以这样使用它：

我在页面上有大约100个这样的选项，我不想在每个选项上都设置这个

minimumsignifictdigits

属性，然后当客户改变主意时，我必须更新所有选项

---

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

用您自己的组件包装它：

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

如果传递属性

minimumsignifictdigits

，则可以轻松覆盖默认值，因为散布道具也可以替换默认道具：

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

---

用另一个组件包装导入的组件

在本例中，

minimumsignifictdigits

的默认值为3，其他道具按原样传递。（这也允许您在需要时覆盖每个组件的默认值）

函数FormattedNumberWithDefault（道具）{
返回(
)
}

显然是的，在

//TreeCharFormattedNumber.jsx
导出默认TreeCharFormattedNumber=（{value}）=>(
>
);
//YourComponent.jsx
从“/TreeCharFormattedNumber”导入TreeCharFormattedNumber；
...
...

---

您还可以将

TreeCharFormattedNumber

放在同一个文件中，保留

导出默认值

我发现以下方法也有效：

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

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

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

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

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

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

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