React - Как применять стили с помощью ref - PullRequest
Новая
       47

React - Как применять стили с помощью ref

3 голосов
/ 13 апреля 2020

У меня есть ссылка на контейнер, и я хочу изменить его background-position. Это должно происходить внутри функции, а значения являются Dynami c, поэтому я не могу создать класс для этого. 

slideRef.current.style["background-position-x"] = "-262.5px"
setTimeout(function(){
  slideRef.current.classList.add("spin_animation");
  slideRef.current.style = {backgroundPositionX: "-" + scrollAmount + "px"}
 10);

Я попытался двумя способами: получить доступ к свойству и не использовать случай верблюда, а другой передавал стиль как объект, как встроенный стиль.

Как я могу применить background-position, получая прямой доступ к ссылке?

1 Ответ

3 голосов
/ 13 апреля 2020 
elementRef.current.style.backgroundPositionX = "-262.5px";


const App = () => {
  const elementRef = React.useRef(null);
  const handler = () => {
    if (elementRef.current) {
      elementRef.current.style.color = "red";
      elementRef.current.style.backgroundPositionX = "-262.5px";
      console.log(elementRef.current.style);
    }
  };
  return (
    <div className="App">
      <h1 ref={elementRef}>Sample Text</h1>
      <h2 onClick={handler}>Click me to change the style of the text</h2>
    </div>
  );
}
ReactDOM.render(<App />, document.getElementById("root"));
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>
...