Вопрос про React. Как правильно использовать хук useEffect?

Question

Передо мной стояла задача сделать так, чтобы у каждого элемента line после 3-ого уменьшалась ширина, исходя из того, какой сейчас номер элемента. Как я могу реализовать это на реакте с использованием хука useEffect? P.S данный код не сработал

const Line = () => {
  useEffect = () => {
    const LineNew = document.querySelectorAll('.line')
    const arrLineNew = Array.from(LineNew)
    let excluded = arrLineNew.filter((item,index) => index>3)
        excluded.forEach((element,i) => {
          element.style.width = `calc(22px - ${i}px)`
        });
  }
  return <div className='line__container'>
    <div className='line'></div>
    <div className='line'></div>
    <div className='line'></div>
    <div className='line'></div>
    <div className='line'></div>
    <div className='line'></div>
    <div className='line'></div>
    <div className='line'></div>
    <div className='line'></div>
    <div className='line'></div>
    <div className='line'></div>
    <div className='line'></div>
    <div className='line'></div>
    <div className='line'></div>
  </div>
}

Answer 1

Без использования useEffect:

const Lines = () => {
  return ( <div className = 'lines' > {
      Array.apply(null, Array(10)).map((el, i) => {
        return <div key={i} className = 'line'
        style = {
          {width: `calc(22px - ${i > 2 ? i : 0}px)`}}></div>
      })
    } </div>
  )
}


const domContainer = document.querySelector('#root');
const root = ReactDOM.createRoot(domContainer);
root.render( <Lines/> );

.lines{
display: flex;
flex-direction: column;
}

.line{
margin-bottom: 5px;
height: 5px;
background-color: #000000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

БЛОГ НА HUSL

Вопрос про React. Как правильно использовать хук useEffect?

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