Блог

Главная - Вопросы по программированию - Почему встроенный стиль не применяется?

Почему встроенный стиль не применяется?

#javascript #css #reactjs

#javascript #css #reactjs

Вопрос:

У меня есть встроенный стиль в jsx для условного класса (класс, который добавляется и удаляется на основе условия). Но встроенный стиль по какой-то причине не применяется.

 function App() {
  const [date , setDate] = useState('')
  const [circleBoolean, setCircleBoolean] = useState(false);
  let random_number;
  useEffect(() => {
    const interval = setInterval(() => {
      doThings()
    }, 2000);
    return () => clearInterval(interval);
  }, [circleBoolean]);

  function doThings() {
    setCircleBoolean(!circleBoolean);
    setDate(moment().format('MMMM Do YYYY, h:mm:ss a')) ;
    random_number = Math.random()*100;
    console.log("cirlce boolean :"   circleBoolean)
  }

  console.log("cirlce boolean outside:"   circleBoolean)


  return (
    <div className="App">
      <div className="bg">
        <div style={{top:random_number "%"} , {left:random_number "%"}}  className={circleBoolean ? "circle" : ""}   />
        <div className="card">
          <p className="card-info">{date}</p>
        </div>
      </div>
    </div>
  );
}

<div style={{top:random_number "%"} , {left:random_number "%"}} className={circleBoolean ? "circle" : ""} здесь верхний и левый стили не применяются при добавлении класса circle .

Комментарии:

1. style={{вверху: random_number «%» , слева:random_number «%»}}

Ответ №1:

Вы неправильно пишете встроенные стили.

Ознакомьтесь с приведенным ниже кодом

 <div style={{
    top:`${random_number}%`,
    left:`${random_number}%`
}}  className={circleBoolean ? "circle" : ""}   />

Такие свойства стиля, как top , left все должны быть в одном объекте, который должен быть передан style атрибуту элемента HTML.

Ответ №2:

Вы должны использовать random_number в качестве состояния для обновления изменений в пользовательском интерфейсе, также способ написания встроенного стиля неверен. Проверьте мой пример: https://codesandbox.io/s/ancient-wood-6143r?file=/src/App.js . Обратите внимание, что я использую marginTop, marginLeft вместо top,left, чтобы отразить изменение стиля (не уверен в вашем намерении использовать top,left).