reactjs - 使用 React Hooks 创建和操作组件

Question

我正在尝试创建主页旋转木马。它基本上是 3 个带有文章的 div，我希望能够操纵某些东西，比如标题的字体大小和位置(顶部边距)

我的初始代码是这样的:

const Home = () => {
  const [margin, setMargin] = useState('420px')
  const [font, setFont] = useState('20px')

  function mouseOver (){
    setMargin('320px')
    setFont('40px')
  }

  function mouseOut(){
    setMargin('420px')
    setFont('20px')
  }

  return(
    <div className='carousel'>
      <div className='column' id='column1' onMouseOver={mouseOver} onMouseOut={mouseOut}>
        <p className='title' id='title1' style={{marginTop: margin,fontSize: font ,color:'black'}} > Τitle 1  </p>
        <p className='markdown' id='markdown1'>mark1 </p>
      </div>
      <div className='column' id='column2' onMouseOver={mouseOver} onMouseOut={mouseOut}>
         <p className='title' id='title2' > Τitle 2</p>
         <p className='markdown' id='markdown2'> mark2</p>
      </div>
      <div className='column' id='column3'>
         <p className='title' id='title3' onMouseOver={mouseOver} onMouseOut={mouseOut}> Τitle 3 </p>
         <p className='markdown' id='markdown3'> mark3</p>
      </div>
    </div>
  )
}
  
export default Home;

每次我将鼠标悬停在任何标题上时，所有标题的大小都会发生变化，因为我使用了相同的值并在每个标题中都进行了更改。所以我想以一种更 react 的方式来做这件事，因为在我看来这就像是plane html with some react，所以这就是我想到的。

const Home = () => {
  const [margin, setMargin] = useState('420px')
  const [font, setFont] = useState('20px')

  function mouseOver(){
    setMargin('320px')
    setFont('40px')
  }

  function mouseOut(){
    setMargin('420px')
    setFont('20px')
  }

  const arrayDivs =[]

  for (let i=0; i<=2; i++) {
    const div = React.createElement(
      'div', //type
      {key: i, className: 'column', id: `column${i+1}` }, //properties of element
      React.createElement(
        'p', //children of element
        {
          key: i,
          className: 'title',
          id: `title${i+1}`,
          style: {
            marginTop: margin,
            fontSize: font
          },
          onMouseOver: mouseOver(),
          onMouseOut:mouseOut()
        }
      ),
      `title${i+1}`
    )  
    arrayDivs.push(div)
  }

  return(
    <div className='carousel'>
      { arrayDivs }
    </div>
  )
}
  
export default Home;

但我遇到了这个错误:

Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
at renderWithHooks (react-dom.development.js:16317:1)
at mountIndeterminateComponent (react-dom.development.js:20074:1)
at beginWork (react-dom.development.js:21587:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
at beginWork$1 (react-dom.development.js:27451:1)
at performUnitOfWork (react-dom.development.js:26557:1)
at workLoopSync (react-dom.development.js:26466:1)
at renderRootSync (react-dom.development.js:26434:1)

Answer 1

代码是渲染循环，因为它立即调用处理程序:

for (let i=0; i<=2; i++){
  const div = React.createElement(
    'div', // type
    { key: i, className: 'column', id: `column${i+1}` }, // properties of element
    React.createElement(
      'p', // children of element
      {
        key: i,
        className: 'title',
        id: `title${i+1}`,
        style: { marginTop: margin, fontSize: font },
        onMouseOver: mouseOver(), // <-- immediately invoked
        onMouseOut: mouseOut()    // <-- immediately invoked
      }
    ),
    `title${i+1}`
  );  
  arrayDivs.push(div);
}

您需要传递对 mouseOver 和 mouseOut 处理程序的引用:

{
  key: i,
  className: 'title',
  id: `title${i+1}`,
  style: { marginTop: margin, fontSize: font },
  onMouseOver: mouseOver, // <-- pass reference
  onMouseOut: mouseOut    // <-- pass reference
}

也就是说，使用 onMouseOver 和 onMouseOut 处理程序在实践中往往效果不佳。无论它是否被认为是“React Way”，我都强烈建议使用 CSS 和 :hover 规则来应用 CSS 样式。

例子:

CSS

.column .title {
  margin-top: 420px;
  font-size: 20px;
}

.column:hover .title {
  margin-top: 320px;
  font-size: 40px;
}

.title {
  color: black;
}

首页

const Home = () => {
  return(
    <div className='carousel'>
      <div className='column' id='column1'>
        <p className='title' id='title1'>Τitle 1</p>
        <p className='markdown' id='markdown1'>mark1</p>
      </div>
      <div className='column' id='column2'>
        <p className='title' id='title2'>Τitle 2</p>
        <p className='markdown' id='markdown2'>mark2</p>
      </div>
      <div className='column' id='column3'>
        <p className='title' id='title3'>Τitle 3</p>
        <p className='markdown' id='markdown3'>mark3</p>
      </div>
    </div>
  )
}