javascript - 为什么按钮上的标题没有改变？

Question

为什么当我按下按钮时，标题不会更改为“隐藏详细信息”，尽管 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();

Answer 1

请注意，您的模板 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>