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

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

  •  1
  • tensai  · 技术社区  · 6 年前

    <FormattedNumber > 我从中导入 react-intl

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

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

    4 回复  |  直到 6 年前
        1
  •  1
  •   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

        2
  •  1
  •   Jordan Burnett    6 年前

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

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

    function FormattedNumberWithDefault(props) {
        return (
           <FormattedNumber minimumSignificantDigits={3} {...props}>
        )
    }
    
        3
  •  1
  •   Ori Drori    6 年前

    用自己的组件包装:

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

    MyFormattedNumber 将传递给 FormattedNumber :

    <MyFormattedNumber value={3} />
    

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

    <MyFormattedNumber minimumSignificantDigits={15} value={somevar}>
    
        4
  •  0
  •   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,
    }