Как установить значения по умолчанию для импортированных компонентов в REACT - PullRequest
Новая
       24

Как установить значения по умолчанию для импортированных компонентов в REACT

0 голосов
/ 18 октября 2018

Допустим, я использую <FormattedNumber >, который импортирую из react-intl

. У него есть свойство, называемое minimumSignificantDigits, поэтому, если я установлю его, все мои числа будут выглядеть потрясающе, как 1.00... здорово, когда вы работаете с валютами ... так что я могу использовать это так: <FormattedNumber minimumSignificantDigits={3} value={somevar}>

У меня около 100 таких на странице, и я не хочу продолжать устанавливать это minimumSignificantDigits свойство каждого из них, а затем, когда клиент передумает, я должен обновить их все.

Есть ли способ, которым я могу установить / переопределить некоторые свойства по умолчанию для этого компонента, когдаЯ импортирую это.

Ответы [ 4 ]

0 голосов
/ 19 октября 2018

Я обнаружил, что следующее также работает: 

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

FormattedNumber.defaultProps = {
  style: 'decimal', 
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
}
0 голосов
/ 18 октября 2018

Обернуть импортированный компонент другим.

В этом примере значение по умолчанию для minimumSignificantDigits будет равно 3 с любыми другими пропущенными пропусками как есть.(Это позволяет вам при необходимости переопределить настройки по умолчанию для каждого компонента) 

function FormattedNumberWithDefault(props) {
    return (
       <FormattedNumber minimumSignificantDigits={3} {...props}>
    )
}
0 голосов
/ 18 октября 2018

Очевидно, да, создайте обертку вокруг <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

0 голосов
/ 18 октября 2018

Оберните его своим собственным компонентом: 

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

Теперь вы можете импортировать его, когда это необходимо, и все, что вы передадите в MyFormattedNumber, будет передано в завернутый FormattedNumber: 

<MyFormattedNumber value={3} />

Вы можете легко переопределить значение по умолчанию, если передадите свойство minimumSignificantDigits, потому что распространение реквизита также может заменить опору по умолчанию: 

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