Javascript 使用jquery在react组件内部设置样式可以吗

我是react新手，我知道用Jquery操作react组成的dom是一个非常糟糕的主意。然而，操纵react with Jquery呈现的dom组件上的样式是个坏主意吗

ReactDom.render( <LoginPage/>, document.getElementById('root') ); 
//after render call activateJQ();

var activateJQ = function(){
   $('button').animate({
      backgroundColor: "#aa0000",
      color: "#fff",
      width: 500
    }, 1000 );
   $('.error-msg').css("color","red");
};

ReactDom.render（，document.getElementById（'root'）；
//渲染后调用activateJQ（）；
var activateJQ=函数（）{
$（“按钮”）。设置动画({
背景颜色：“aa0000”，
颜色：“fff”，
宽度：500
}, 1000 );
$（'.error msg'）.css（“颜色”、“红色”）；
};

---

它可以在这个页面上运行，但我想将它合并到更复杂的页面中，这些页面可以更改状态并重新加载。如何使用添加的样式处理组件

简短的回答是：是的，你可以。但这是一个非常糟糕的主意，如果你这么做了，你会后悔的

在您的特定示例中，使用jQuery应用样式（颜色或错误消息）和动画样式（按钮的背景色等）不会破坏任何东西

也就是说，使用react应用样式有一些特殊的优点：您必须在组件生命周期的正确时刻应用样式（在您分配给组件的css类中）和动画（在

componentDidMount（）

中或使用

）。这使您的代码更容易调试：如果您的样式中断，您可以在react中的正确位置找到所有可疑代码

记住：react是一个动态引擎，它可以根据用户操作更改DOM的结构。css样式与DOM结构紧密耦合，因此您希望它们同步（并在代码中的同一位置进行管理）

在您的特定情况下，我至少可以想到一种您的react+jQuery设置出现故障的场景：

• ReactDOM.render（）

  运行并启动react引擎
• 初始反应渲染周期有2个按钮和1条错误消息
• 应用jQuery，设置2个按钮和1条错误消息的动画
• 用户进行一些单击
• react使用2个新按钮和1条新错误消息重新渲染
• 您的jQuery不会再次运行
• 新的react按钮和错误消息没有获得新的样式

或者，如果在react中的每个

render（）

之后调用

activateJQ（）

：

• 1000ms超时可能会与渲染周期不同步，因此可能会导致不必要的DOM更新，或者更糟糕的是，如果在jQuery更新期间react更改DOM，则会中断
• 带有样式更新的jQuery类选择器是一个臭名昭著的粗糙工具（因此会降低性能）。它需要每次遍历整个DOM进行更新，其中包括对甚至不需要更新的组件的更新。在react中管理样式更有效：样式只应用于需要它的组件，并且只在组件需要它的时候应用

---

随着应用程序的增长，您会发现混合使用react和jQuery来管理DOM和样式（这两者之间相互依赖性很强）将变得难以管理。

我认为更惯用的方法是制作一个按钮组件，在

componentDidMount

中，通过定位组件本身而不是所有

按钮来调用该动画。您可能不需要jQuery来实现这一点-您可以指定一个类来设置按钮的动画掌握jquery，最好不要把它扔到一边