Mam taką funkcję, na przykład:

const FieldRange = props => (
  <div className={b('field-range', props)}>
    {props.children}
    {!!props.errorFieldName && <Field name={props.errorFieldName}/>}
  </div>
);

Ostatecznie postanawiam, że chcę, aby był bardziej suchy i przepisuję go w ten sposób, przebudowując obiekt argumentowy na właściwości:

const FieldRange = ({ children, errorFieldName }) => (
  <div className={b('field-range', props)}>
    {children}
    {!!errorFieldName && <Field name={errorFieldName}/>}
  </div>
);

Ale o nie, nadal potrzebuję oryginalnego obiektu w drugiej linii! Czy istnieje sposób na zniszczenie obiektu, ale nadal pozostawienie go dostępnego w treści funkcji?

0
shakhbulatgaz 24 marzec 2020, 10:43

2 odpowiedzi

Najlepsza odpowiedź

IMO, najlepszą metodą byłoby pozostawienie oryginalnego kodu bez zmian lub zadeklarowanie zmiennych w pierwszym wierszu funkcji:

const FieldRange = props => {
  const { children, errorFieldName } = props;
  return (
    <div className={b('field-range', props)}>
      {props.children}
      {!!errorFieldName && <Field name={errorFieldName}/>}
    </div>
  );
);

Istnieje naprawdę hakerskie rozwiązanie, które pozwala zachować zwięzłe treści, którym jest użycie drugiego parametru, który nie jest przekazywany do funkcji, która domyślnie jest zniszczona props:

const FieldRange = (props, { children, errorFieldName } = props) => {

Ale to dość zagmatwane, nie polecałbym tego.

1
CertainPerformance 24 marzec 2020, 07:46

Możesz niewłaściwie użyć drugiego parametru do destrukcji z domyślną wartością props.

const FieldRange = (props, { children, errorFieldName } = props) => (
    <div className={b('field-range', props)}>
        {children}
        {!!errorFieldName && <Field name={errorFieldName}/>}
    </div>
);
1
Nina Scholz 24 marzec 2020, 07:46