¿Por qué cuando presiono el botón el título no cambia a 'Ocultar detalles' a pesar de Nombre = falso?

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();
2
Szymon 15 sep. 2018 a las 17:17

4 respuestas

La mejor respuesta

Tenga en cuenta que su plantilla jsx está codificada y solo se evalúa una vez cuando el programa se ejecuta inicialmente. Por lo tanto, solo toma el valor de Name como true y se convierte en una constante. Renderizarlo de nuevo no va a cambiar de ninguna manera. Debería usar un componente en lugar de:

<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>
4
Bhojendra Rauniyar 15 sep. 2018 a las 15:24

Porque un componente solo se procesa cuando el estado o los accesorios cambian. La forma en que definió su componente, no tiene accesorios ni estado.

Tratar:

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>
    );
  }
}

No estoy seguro de qué versión de react o env estás usando, pero esto debería funcionar para la mayoría de las configuraciones.

1
Salomao Rodrigues 15 sep. 2018 a las 14:59

Así es como haría eso:

    
    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>
2
Jonathan Rys 15 sep. 2018 a las 14:52

Parece que el OP tiene una comprensión muy limitada de React. Esto no es una crítica, todos tenemos que comenzar en alguna parte (y no me consideraría muy por encima del nivel de principiante con React :)). Pero si desea hacer algo con React, incluso solo un ejemplo de juguete, le recomiendo leer la documentación introductoria en https://reactjs.org/docs/hello-world.html y las páginas siguientes. En particular, llamo su atención a lo siguiente:

0
Robin Zigmond 15 sep. 2018 a las 15:01