代码之家 › 专栏 › 技术社区 › tensai

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

react-intl ecmascript-6 reactjs javascript

tensai · 技术社区 · 6 年前

<FormattedNumber > 我从中导入 react-intl

minimumSignificantDigits ,所以如果我设置它,我所有的数字看起来都很棒 1.00 ... 当你使用货币的时候很好。。所以我可以这样使用它: <FormattedNumber minimumSignificantDigits={3} value={somevar}>

最小有效位数 属性,然后当客户改变主意时,我必须更新所有的属性。

4 回复 | 直到 6 年前

lellefood 6 年前

显然是的,做个包装 <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

Jordan Burnett 6 年前

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

在本例中,默认值 minimumSignificantDigits 如果其他道具按原样通过的话会是3(这也允许您根据每个组件覆盖默认值(如果需要)

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

Ori Drori 6 年前

用自己的组件包装:

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

MyFormattedNumber 将传递给 FormattedNumber :

<MyFormattedNumber value={3} />

minimumSignificantDigits ,因为展开道具也可以替换默认道具:

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

tensai 6 年前

我发现以下方法同样有效:

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

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

推荐文章