Javascript 为什么按钮上的标题没有'；你不会变吗？

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

让Name=true；
常数Tekst=（）=>{
Name=false；
Render（）；
};
常量模板=(
可见性切换
{Name？'Show details'：'Hide details'}
);
const root=document.getElementById（'app'）；
constrender=（）=>ReactDOM.Render（模板，根）；
Render（）；

因为组件仅在状态或道具更改时渲染。 按照您定义组件的方式，它没有道具或状态

尝试：

class Tekst扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={Name:true}；
this.toggle=this.toggle.bind（this）；
}
切换（）{
this.setState（{Name:！this.state.Name}）；
}
render（）{
返回(
可见性切换
{this.state.Name？'Show details'：'Hide details'}/>
);
}
}

---

我不确定您使用的是哪一版本的react或env，但这应该适用于大多数设置。

请注意，您的模板jsx是硬编码的，仅在程序最初运行时计算一次。所以它只是将

Name

的值取为

true

，并变成一个常量。再次渲染它不会以任何方式改变。您应该使用组件，而不是：

<Template />

让Name=true；
常数Tekst=（）=>{
Name=！Name；
Render（）；
};
常量模板=（）=>(
可见性切换
{Name？“显示详细信息”：“隐藏详细信息”}
);
const root=document.getElementById（“应用”）；
const Render=（）=>ReactDOM.Render（，根）；
Render（）
我会这样做：



类模板扩展了React.Component{
构造函数（）{
超级（）；
this.state={name:true}；
}
测试=（）=>{
this.setState（{name:！this.state.name}）；
};
render（）{
返回(
可见性切换
{this.state.name？'Show details'：'Hide details'}
)
}
}
ReactDOM.render(
,
document.getElementById（“根”）
);
看来OP对React的理解非常有限。这不是一个批评，我们都必须从某个地方开始（而且我不会认为自己远远高于初学者的水平：反应）。但是如果你想用React制作一些东西，哪怕只是一个玩具的例子，我强烈建议你通读介绍性文档和后面的页面。我特别提请你注意以下几点：


（这就解释了为什么在呈现像您这样的“React元素”时，除非重新呈现，否则它永远无法更新）

解释React组件的基础知识，说明您需要函数或（对于大多数非平凡组件）ES6类。拥有React组件后，当其道具或状态发生更改时，它将自动重新渲染。（正如Salomao所指出的，您的应用程序既不包含也不包含。）

我的答案是，只有使用我提供的代码的用户，show details才会更改为隐藏详细信息。你运行了吗？这是正确的答案，忽略前面的评论。问题是，在加载脚本时，模板只计算了一次。但您希望在每次渲染时对其求值，因此必须将其更改为函数：注意
consttemplate=（）=>
。而且，
ReactDOM.render（，
当然，这在我的脑海中闪过，但他可能会尝试从react开始，让他在自己的时间内到达类组件，我认为可以编辑，将在2-3分钟内完成。感谢你建议你的模板是一堆静态jsx，你应该让它成为一个函数。
<Template />