Question

为什么当我按下按钮时，即使Name = false，标题也不会更改为“ Hide details”？

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

因为组件仅在状态或道具更改时才渲染。定义组件的方式没有任何道具或状态。

尝试：

sentences = ['hey how are you', 'how do you do', 'how are you doing']
queries = ['how', 'how are']

for i in queries:
    for j, items in enumerate(sentences):
        if i in items:
            print(j, end=' ')
    print()

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

Answer 4

看来，OP对React的理解非常有限。这不是批评，我们所有人都必须从某个地方开始（我不会认为我自己在React的初学者水平之上））。但是，如果您想使用React做点什么，甚至只是一个玩具示例，我强烈建议您通读https://reactjs.org/docs/hello-world.html的入门文档和后续页面。特别是，我请您注意以下几点：

https://reactjs.org/docs/rendering-elements.html#updating-the-rendered-element（这说明了为什么渲染“反应性元素”（例如您的元素）时，除非重新渲染，否则永远无法对其进行更新）。
https://reactjs.org/docs/components-and-props.html#functional-and-class-components解释了React Components的基础，并解释了您需要一个函数或一个ES6类（对于大多数非平凡的组件）。一旦有了React组件，当其Props或State改变时，它将自动重新渲染。（如Salomao所指出的，您的应用程序都不包含。）

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

4 个答案: