为什么当我按下按钮时,标题不会更改为“隐藏详细信息”,尽管 Name=false ?
let Name= true;
const Tekst= () =>{
Name=false;
Render();
};
const template = (
<div>
<h1>Visibility Toggle</h1>
<button onClick={Tekst}>{Name ? 'Show details' : 'Hide details'}</button>
</div>
);
const root= document.getElementById('app');
const Render = () =>ReactDOM.render(template, root);
Render();
最佳答案
请注意,您的模板 jsx 是硬编码的,并且仅在程序最初运行时评估一次。所以它只是将 Name
的值设为 true
并成为一个常量。再次渲染它不会以任何方式改变。您应该使用一个组件:
<Template />
let Name = true;
const Tekst = () => {
Name = !Name;
Render();
};
const Template = () => (
<div>
<h1>Visibility Toggle</h1>
<button onClick={Tekst}>
{Name ? "Show details" : "Hide details"}
</button>
</div>
);
const root = document.getElementById("app");
const Render = () => ReactDOM.render(<Template />, root);
Render();
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
关于javascript - 为什么按钮上的标题没有改变?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52345540/