Изменить стиль на событии MouseOver в ReactionJS, функциональный компонент

Question

У меня есть компонент и три тега div.В одном из тегов div я создал событие onMouseOver и пытаюсь изменить цвет текста onMouseOver.

React onMouseOver, onMouseEnter события и стиль динамически изменяются в React.

import React from 'react'

function Middle() {
    const styles = {


        'text-align': 'center',
        'padding': '30px',
    }
    function myName() {
        styles.color = "green"

    }
    function noName() {

    }

    return (
        <div className="middle">

            <div id="cspace" style={styles} onMouseEnter={myName} onMouseLeave={noName}>
                <h1>Hello World</h1>
            </div>

        </div>
    )
}

export default Middle

Я ожидаю, что цвет текста в div изменится.вывод, который я получаю:

«Невозможно добавить цвет свойства, объект не расширяемый»

Answer 1

Вместо того, чтобы делать это с onMouseEnter & onMouseLeave, я бы порекомендовал вам перейти на CSS, поскольку эти операции легче по сравнению с такими операциями Javascript, как onMouseEnter & onMouseLeave

function Middle() {
    const styles = {
        'text-align': 'center',
        'padding': '30px',
    }
    return (
        <div className="middle">

            <div id="cspace" style={styles}>
                <h1>Hello World</h1>
            </div>

        </div>
    )
}

ReactDOM.render(<Middle />, document.getElementById("root"));

#cspace:hover{
  color: green;
  cursor:pointer;
}

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

Answer 2

Для функционального компонента это хороший сценарий для использования useState хука для хранения значения color.

function App() {
  const [color, setColor] = React.useState("");
  const styles = {
    "text-align": "center",
    padding: "30px",
    color: color
  };

  return (
    <div className="middle">
      <div
        id="cspace"
        style={styles}
        onMouseEnter={() => setColor("green")}
        onMouseLeave={() => setColor("")}
      >
        <h1>Hello World</h1>
      </div>
    </div>
  );
}

См. CodeSandbox

Answer 3

Вы можете сделать это, используя только CSS.попробуйте это.

#cspace:hover{color:red;}