为什么按钮上的标题不会改变？

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>

Answer 2

我就是这样做的：

    
    class Template extends React.Component {
      constructor() {
        super();
        
        this.state = {name: true};
      }

      test = () => {
        this.setState({name: !this.state.name});
      };
      
      render() {
        return (
          <div>
            <h1>Visibility Toggle</h1>
            <button onClick={this.test}>{this.state.name ? 'Show details' : 'Hide details'}</button>        
          </div>
        )
      }
    }
    
ReactDOM.render(
  <Template/>,
  document.getElementById("root")
);

<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>
<div id="root"></div>

Answer 3

因为组件仅在状态或道具发生变化时呈现。您定义组件的方式，它没有任何道具或状态。

尝试：

class Tekst extends React.Component {
  constructor(props) {
    super(props);
    this.state = { Name: true };
    this.toggle = this.toggle.bind(this);
  }

  toggle() {
    this.setState({ Name: !this.state.Name });
  }

  render() {
    return (
      <div>
        <h1>Visibility Toggle</h1>
        <button onClick={this.toggle}>{ this.state.Name ? 'Show details' : 'Hide details'} />
      </div>
    );
  }
}

我不确定您的反应版本或环境版本，但这应该适用于大多数设置。

Answer 4

看来OP对React的理解非常有限。这不是批评，我们都必须从某个地方开始（我不会认为自己远远超过React的初级水平:)）。但是如果你想用React制作一些东西，即使只是一个玩具的例子，我强烈建议你阅读https://reactjs.org/docs/hello-world.html及后续页面的介绍性文档。特别是，我提请你注意以下几点：

• https://reactjs.org/docs/rendering-elements.html#updating-the-rendered-element（这解释了为什么当呈现诸如你的“React元素”时，除了重新渲染之外它永远不会被更新）。
• https://reactjs.org/docs/components-and-props.html#functional-and-class-components解释了React组件的基础知识，解释说您需要一个函数或（对于大多数非平凡的组件）ES6类。一旦有了React组件，它将在其Props或State被更改时自动重新呈现。 （正如Salomao所说，你的申请既不包含。）