在 React 中，为什么当我的变量值发生变化时，我的组件样式没有更新？

Question

我有这个React代码，当completed为真时，应该应用textDecoration: 'line-through'的内联样式:

import React from "react";
var x = false;
function strike() {
x ? x = false : x = true;
}
function App() {
return (
<button
onClick={strike}
style={x ? {textDecoration: "line-through"} : null}
>
Buy Bughattis
</button>
)
}

line-through函数不工作，因为它没有像我期望的那样改变文本装饰。我做错了什么?

Answer 1

问题似乎是您正在创建一个常规变量而不是一个react useState对象。试试下面的代码:

import React from "react";
import {useState} from "react";
function App () {
const [x, setX] = useState(false);
return <button onClick={()=> {setX(x => !x)}} style={[your style as is]}>Buy Bughattis</button>
}
export default App;

同样，不管这是否解决了你的问题，你应该去阅读我在你的帖子评论中分享的链接，并按照社区指南修复这篇文章，或者删除这篇文章。