在React中使用jQuery仅用于更改样式(颜色，边框等)是可以的吗?

Question

很多人说同时使用jQuery和React是不好的，因为它们都是在DOM上工作的。但是，如果我只是使用jQuery来更改样式属性(例如颜色，border-width, background-color等)，这是可以的吗?这主要是为了方便，因为$(.foo)比document.getElementByClassName('foo')更容易使用。

Answer 1

虽然可能，但这可能不是一个好主意-您必须确保在组件呈现时将样式更改应用于所有适用的子组件。

如果您不喜欢document.getElementByClassName的冗长，可以随意将其抽象为函数，例如

const $ = selector => document.querySelector(selector)

但是最好完全避免本机DOM操作方法。在React中，应用程序的状态应该完全来自React的状态。

要以正确的React方式更改样式，请将其写入JSX。例如:

const App = () => {
const [highlighted, setHighlighted] = React.useState();
return (
<div
className={highlighted ? 'highlighted' : ''}
onClick={() => setHighlighted(true)}
>click</div>
);
};
ReactDOM.render(<App />, document.querySelector('.react'));

.highlighted {
background-color: yellow;
}

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

或者，如果你想直接在元素上设置样式，而不是使用类:

const App = () => {
const [highlighted, setHighlighted] = React.useState();
return (
<div
style={{
backgroundColor: highlighted ? 'yellow' : ''
}}
onClick={() => setHighlighted(true)}
>click</div>
);
};
ReactDOM.render(<App />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>