Блог

Главная - Вопросы по программированию - Назначить стиль компоненту react, например javascript element.style.синтаксис width = width

Назначить стиль компоненту react, например javascript element.style.синтаксис width = width

#javascript #reactjs

#javascript #reactjs

Вопрос:

Мне интересно, есть ли способ добавить стили и атрибуты к компоненту react, используя синтаксис, подобный следующему.

 const rect = <rect></rect>
rect.style.fill = "black" 
rect.style.height = "50px"
rect.style.width = "50px"

Это не работает (или я бы не спрашивал), но есть ли что-то подобное?

Спасибо!

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

1. Вы читали документы react? reactjs.org/docs/faq-styling.html

Ответ №1:

Это возможно, используя ссылки.

 const { useEffect, useRef } = React;

const App = () => {
  const ref = useRef(null);
  const rect = <div ref={ref}></div>;
  
  useEffect(() => {
    ref.current.style.background = "black";
    ref.current.style.height = "50px";
    ref.current.style.width = "50px";
  }, []);
  
  return rect;
}

ReactDOM.render(<App />, document.getElementById("root"));  
 <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>