React. Каким образом я могу разделить логику без создания доп. компонента?

Question

Хук:

import { useState } from 'react';

export const useFade = () => {
  const [isFade, setIsFade] = useState(false);

  return {
    isFade,
    onMouseDown: () => setIsFade(true),
    onMouseLeave: () => setIsFade(false),
    onMouseUp: () => setIsFade(false)
  };
}

Компонент с общим состоянием isFade для цикла:

import React from "react";
import { useFade } from '../hooks/useFade';

export const ChangeColorOption = ({ colors }) => {
  const { isFade, ...fadeProps } = useFade();

  return (
    <div
      role="button"
      tabIndex="0"
      className="context-menu-option"
    >
      <div className="context-menu-option-colors">
        {colors.map((color, idx) => (
          <div
            {...fadeProps}
            key={idx} 
            className={
              isFade 
                ? 'context-menu-option-color fade'
                : 'context-menu-option-color'
            }
          >
            <span className={'icon ' + color}></span>
          </div>
        ))}
      </div>
    </div>
  );
}

Как я могу использовать состояние для каждого элемента в цикле без создания отдельного компонента с этим хуком?

Answer 1

\hooks\use-stores.js

import React from 'react'
import { storesContext } from '../contexts/global'

export const useStores = () => React.useContext(storesContext)

\contexts\global.js

import React from 'react'
import { MyStore } from '../stores/my-store'

export const storesContext = React.createContext({
  myStore: new MyStore()
})

\store\my-store.js

export class MyStore {
// все данные которые нужны + методы доступа к ним
}

БЛОГ НА HUSL

React. Каким образом я могу разделить логику без создания доп. компонента?

Ответы (1 шт):