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

Question

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

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

我在页面上有大约 100 个，我不想继续在它们的每一个上设置这个minimumSignificantDigits属性，然后当客户改变主意时，我必须更新所有这些。

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

Answer 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

Answer 2

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

在此示例中，minimumSignificantDigits的默认值为 3，任何其他 props 按原样传递。 (如果需要，您还可以在每个组件的基础上覆盖默认值(

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

Answer 3

用你自己的组件包装它：

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

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

<MyFormattedNumber value={3} />

如果传递属性minimumSignificantDigits，则可以轻松覆盖默认值，因为扩展 props 也可以替换默认 prop：

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

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,
}