如何在 REACT 中为导入的组件设置默认值
How to set default values on imported components in REACT
假设我正在使用从 react-intl
导入的 <FormattedNumber >
它有一个名为 minimumSignificantDigits
的 属性,所以如果我设置它,我的所有数字看起来都很棒,就像 1.00
...当你使用货币时非常棒......所以我可以这样使用它:
<FormattedNumber minimumSignificantDigits={3} value={somevar}>
我在页面上有大约 100 个这样的内容,我不想在其中的每一个上都设置这个 minimumSignificantDigits
属性,然后当客户端更改时 his/her 请注意,我必须更新所有这些。
有什么方法可以在我导入该组件时 set/override 该组件的一些默认属性。
用你自己的组件包裹它:
export const MyFormattedNumber = (props) => (
<FormattedNumber minimumSignificantDigits={3} {...props}>
);
现在您可以在需要时导入它,您传递给 MyFormattedNumber
的所有内容都将传递给包装的 FormattedNumber
:
<MyFormattedNumber value={3} />
如果你通过 属性 minimumSignificantDigits
,你可以很容易地覆盖默认值,因为传播道具也可以替换默认道具:
<MyFormattedNumber minimumSignificantDigits={15} value={somevar}>
用另一个包裹导入的组件。
在这个例子中,minimumSignificantDigits
的默认值将是 3,任何其他道具都按原样传递。 (如果需要,这还允许您在每个组件的基础上覆盖默认值)
function FormattedNumberWithDefault(props) {
return (
<FormattedNumber minimumSignificantDigits={3} {...props}>
)
}
显然是的,围绕 <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
我发现以下方法也有效:
import React from 'react'
import {FormattedNumber} from 'react-intl'
import {Link} from 'react-router-dom'
FormattedNumber.defaultProps = {
style: 'decimal',
minimumFractionDigits: 2,
maximumFractionDigits: 2,
}
假设我正在使用从 react-intl
<FormattedNumber >
它有一个名为 minimumSignificantDigits
的 属性,所以如果我设置它,我的所有数字看起来都很棒,就像 1.00
...当你使用货币时非常棒......所以我可以这样使用它:
<FormattedNumber minimumSignificantDigits={3} value={somevar}>
我在页面上有大约 100 个这样的内容,我不想在其中的每一个上都设置这个 minimumSignificantDigits
属性,然后当客户端更改时 his/her 请注意,我必须更新所有这些。
有什么方法可以在我导入该组件时 set/override 该组件的一些默认属性。
用你自己的组件包裹它:
export const MyFormattedNumber = (props) => (
<FormattedNumber minimumSignificantDigits={3} {...props}>
);
现在您可以在需要时导入它,您传递给 MyFormattedNumber
的所有内容都将传递给包装的 FormattedNumber
:
<MyFormattedNumber value={3} />
如果你通过 属性 minimumSignificantDigits
,你可以很容易地覆盖默认值,因为传播道具也可以替换默认道具:
<MyFormattedNumber minimumSignificantDigits={15} value={somevar}>
用另一个包裹导入的组件。
在这个例子中,minimumSignificantDigits
的默认值将是 3,任何其他道具都按原样传递。 (如果需要,这还允许您在每个组件的基础上覆盖默认值)
function FormattedNumberWithDefault(props) {
return (
<FormattedNumber minimumSignificantDigits={3} {...props}>
)
}
显然是的,围绕 <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
我发现以下方法也有效:
import React from 'react'
import {FormattedNumber} from 'react-intl'
import {Link} from 'react-router-dom'
FormattedNumber.defaultProps = {
style: 'decimal',
minimumFractionDigits: 2,
maximumFractionDigits: 2,
}