reactjs - 尝试通过更改状态挂钩来更改 React Style 属性

Question

Transform 不会更新下面的样式组件。我已经控制台记录了状态以确保它正在发生变化，而不是样式组件（它保持红色）。

import React, {useState} from 'react';

const Carousel = () => {
    let [selectedIndex, setSelectedIndex] = useState(0)
    const [cellCount,] = useState(9);
    let [transform, setTransform] = useState({color: 'red'});

    const prevButton = () => {
        setSelectedIndex(selectedIndex-1);
        setTransform({color: 'green !important'})
        console.log(selectedIndex)
        console.log(transform)
    };

    const nextButton = () => {
        setSelectedIndex(selectedIndex+1);
        setTransform({color: 'red !important'})
        console.log(transform)
    }
return (
        <>
            <div className="scene">
                <div style={transform} className="carousel">
                    <div className="carousel__cell">1</div>
                    <div className="carousel__cell">2</div>
                    <div className="carousel__cell">3</div>
                    <div className="carousel__cell">4</div>
                    <div className="carousel__cell">5</div>
                    <div className="carousel__cell">6</div>
                    <div className="carousel__cell">7</div>
                    <div className="carousel__cell">8</div>
                    <div className="carousel__cell">9</div>
                </div>
            </div>
                <button onClick={prevButton}>
                    Previous
                </button>
                <button onClick={nextButton}>
                    Next
                </button>
        </>
    )
}

Answer 1

React 内联样式不知道 !important 属性。通常总有办法避免使用它，而且最好这样做。

如果你只是不避免使用 !important，它会在这里工作。

如果您必须设置它，这将起作用：

import React, { useState } from 'react';

const Carousel = () => {
  let [selectedIndex, setSelectedIndex] = useState(0);
  let [transform, setTransform] = useState({ color: 'red' });

  const prevButton = () => {
    setSelectedIndex(selectedIndex - 1);
    setTransform({ ...{ color: 'green' } });
    // rotateCarousel();
    console.log(selectedIndex);
    console.log(transform);
  };

  const nextButton = () => {
    setSelectedIndex(selectedIndex + 1);
    setTransform({ ...{ color: 'red' } });
    console.log(transform);
    // rotateCarousel();
  };
  return (
    <>
      <div className="scene">
        <div
          ref={el => {
            if (el) {
              el.style.setProperty('color', transform.color, 'important');
            }
          }}
          className="carousel"
        >
          <div className="carousel__cell">1</div>
          {transform.color}
          <div className="carousel__cell">2</div>
          <div className="carousel__cell">3</div>
          <div className="carousel__cell">4</div>
          <div className="carousel__cell">5</div>
          <div className="carousel__cell">6</div>
          <div className="carousel__cell">7</div>
          <div className="carousel__cell">8</div>
          <div className="carousel__cell">9</div>
        </div>
      </div>
      <button onClick={prevButton}>Previous</button>
      <button onClick={nextButton}>Next</button>
      {transform.color}
    </>
  );
};

export default Carousel;