Передача функций и хуков в React?Или держать все это вместе? - PullRequest
Новая
       12

Передача функций и хуков в React?Или держать все это вместе?

0 голосов
/ 14 мая 2019

Я новичок в крючках и реагирую. У меня есть следующий код: 

import React, { useState, useRef } from 'react';

let doSomething = (obj, section, setActiveItem, subs, i) => {
  if (
    obj.previousPosition === 'in' &&
    obj.currentPosition === 'below'
  ) {

    if (i !== 0) {
      setActiveItem(subs[i - 1].id);
    }
  }
};

export default ({ data }) => {

  const subs = [
    {
      label: 'Section 1',
      id: 'section1',
      ref: useRef(null),
    },
    {
      label: 'Section 2',
      id: 'section2',
      ref: useRef(null),
    },
  ];

  const [activeItem, setActiveItem] = useState('section1');

  return (
    <>
      {subs.map((sub, i) => {
        return (
          <Waypoint
            key={sub.id}
            bottomOffset="75%"
            onEnter={obj => {
              doSomething(obj, sub.id, setActiveItem, subs, i);
              //I DONT LIKE THAT I NEED TO PASS ON EVERYTHING HERE
            }}
          >
            <Section id={sub.id} ref={sub.ref} />
          </Waypoint>
        );
      })}
    </>
  );
};

Теперь моя проблема в том, что в моей функции onEnter мне нужно передать все эти свойства в функцию doSomething, так как она нуждается в них. Но это не кажется правильным или чистым.

  • Как бы я обычно справлялся с этим с помощью крючков? Могу ли я как-то поместить все это в один класс? Но тогда у меня снова будет нормальное состояние, не так ли? Я немного смущен настройкой здесь.

1 Ответ

0 голосов
/ 14 мая 2019

Если вы добавите doSomething в свой компонент, вы можете удалить как минимум два из пяти переданных ему аргументов: 

const component = ({ data }) => {
    const subs = [];
    const [activeItem, setActiveItem] = useState('section1');

    const doSomething = (obj, section, i) => {
        /* ... */
        setActiveItem(subs[i - 1].id);
    }

    return (
        { /* ... */ }
        <Waypoint onEnter={(obj) => doSomething(obj, sub.id, i)} { ... } />
        { /* ... */ }
    );
}

На основе вашего кода вы также можете удалить sub.idпоскольку вы в настоящее время не используете его в функции.

Но я бы порекомендовал удалить i из аргументов и использовать аргумент section вместо проверки, если i !== 0, и получения объекта из subs массив: 

// Without `i`
doSomething = (obj, section) => {
    if (
        obj.previousPosition === 'in' &&
        obj.currentPosition === 'below'
    ) {
        // The if is not needed anymore.
        setActiveItem(section);
    }
}

Это также устранит необходимость в subs в функции doSomething.

...