javascript - paginas - show and hide react

Mostrar u ocultar elemento en React

Question

Estoy jugando con React.js por primera vez y no puedo encontrar una manera de mostrar u ocultar algo en una página a través del evento click. No estoy cargando ninguna otra biblioteca en la página, así que estoy buscando una forma nativa utilizando la biblioteca React. Esto es lo que tengo hasta ahora. Me gustaría mostrar el div de resultados cuando se dispara el evento de clic.

var Search= React.createClass({
    handleClick: function (event) {
        console.log(this.prop);
    },
    render: function () {
        return (
            <div className="date-range">
                <input type="submit" value="Search" onClick={this.handleClick} />
            </div>
        );
    }
});

var Results = React.createClass({
    render: function () {
        return (
            <div id="results" className="search-results">
                Some Results
            </div>
        );
    }
});

React.renderComponent(<Search /> , document.body);

Answer 1

Aquí está mi enfoque utilizando ES6. Si bien la respuesta aceptada es correcta, está bastante desactualizada.

import React, { Component } from ''react'';
// you should use ReactDOM.render instad of React.renderComponent
import ReactDOM from ''react-dom'';

class ToggleBox extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // toggle box is closed initially
      isOpened: false,
    };
    // http://egorsmirnov.me/2015/08/16/react-and-es6-part3.html
    this.toggleBox = this.toggleBox.bind(this);
  }

  toggleBox() {
    // check if box is currently opened
    const { isOpened } = this.state;
    this.setState({
      // toggle value of `isOpened`
      isOpened: !isOpened,

    });
  }

  render() {
    const { title, children } = this.props;
    const { isOpened } = this.state;
    return (
      <div className="box">
        <div className="boxTitle" onClick={this.toggleBox}>
          {title}
        </div>
        {isOpened && children && (
          <div className="boxContent">
            {children}
          </div>
        )}
      </div>
    );
  }
}

ReactDOM.render((
  <ToggleBox title="Click me">
    <div>Some content</div>
  </ToggleBox>
), document.getElementById(''app''));

Demostración: http://jsfiddle.net/kb3gN/16688/

Es mejor representar algún elemento solo si es necesario en lugar de agregar algunas clases css con display: none . Si configura display: none : el elemento aún se representa al reaccionar y se agrega a DOM , lo que puede tener un impacto negativo en el rendimiento.

Imagina que tienes una página con pestañas, donde cada pestaña tiene mucho contenido y donde solo se abre una pestaña a la vez. Es mucho mejor mantener en el DOM solo aquellos elementos que se supone que deben mostrarse.

En el código de arriba, para lograr esto, estoy usando un código como:

{opened && <SomeElement />}

Eso hará que SomeElement solo si está opened es verdadero. Funciona debido a la forma en que JavaScript resuelve las condiciones lógicas:

true && true && 2; // will output 2
true && false && 2; // will output false
true && ''some string''; // will output ''some string''
opened && <SomeElement />; // will output SomeElement if `opened` is true, will output false otherwise

Answer 2

Aquí hay una sintaxis alternativa para el operador ternario:

{ this.state.showMyComponent ? <MyComponent /> : null }

es equivalente a:

{ this.state.showMyComponent && <MyComponent /> }

Lean porque

También sintaxis alternativa con display: ''none'';

<MyComponent style={this.state.showMyComponent ? {} : { display: ''none'' }} />

Sin embargo, si usa en exceso la display: ''none'' , esto lleva a la contaminación del DOM y, en última instancia, ralentiza la aplicación.

Answer 3

Comienzo con esta declaración del equipo React:

En React, puede crear distintos componentes que encapsulan el comportamiento que necesita. Luego, puede procesar solo algunos de ellos, dependiendo del estado de su aplicación.

La representación condicional en React funciona de la misma manera que las condiciones en JavaScript. Utilice los operadores de JavaScript como if o el operador condicional para crear elementos que representan el estado actual, y permita que React actualice la interfaz de usuario para que coincida con ellos.

Básicamente, debe mostrar el componente cuando se hace clic en el botón, puede hacerlo de dos maneras, utilizando simplemente React o usando CSS, utilizando la forma pura de React, puede hacer algo como el siguiente código en su caso, por lo que en la primera ejecución, los resultados no se muestran porque hideResults es true , pero al hacer clic en el botón, el estado cambiará y hideResults es false y el componente se procesará nuevamente con las nuevas condiciones de valor, esto es un uso muy común del cambio de vista de componente en Reaccionar

 {this.state.showFooter && <Footer />}

Si desea seguir estudiando la representación condicional en React, eche un vistazo here .

Answer 4

Creé un pequeño componente que maneja esto por usted: https://www.npmjs.com/package/react-toggle-display

Establece el atributo de estilo para display: none !important función de las hide o show .

Ejemplo de uso:

var ToggleDisplay = require(''react-toggle-display'');

var Search = React.createClass({
    getInitialState: function() {
        return { showResults: false };
    },
    onClick: function() {
        this.setState({ showResults: true });
    },
    render: function() {
        return (
            <div>
                <input type="submit" value="Search" onClick={this.onClick} />
                <ToggleDisplay show={this.state.showResults}>
                    <Results />
                </ToggleDisplay>
            </div>
        );
    }
});

var Results = React.createClass({
    render: function() {
        return (
            <div id="results" className="search-results">
                Some Results
            </div>
        );
    }
});

React.renderComponent(<Search />, document.body);

Answer 5

En algunos casos, el componente de orden superior puede ser útil:

Crear componente de orden superior:

export const MyComp= HidableComponent(MyCompBasic);

Amplíe su propio componente:

<MyComp hidden={true} ... />
<MyComp shouldHide={this.props.useSomeFunctionHere} ... />

Entonces puedes usarlo así:

var Search = React.createClass({
  getInitialState: function() {
    return { hideResults: true };
  },

  handleClick: function() {
    this.setState({ hideResults: false });
  },

  render: function() {
    return (
      <div>
        <input type="submit" value="Search" onClick={this.handleClick} />
        { !this.state.hideResults && <Results /> }
      </div> );
  }

});

var Results = React.createClass({
  render: function() {
    return (
    <div id="results" className="search-results">
      Some Results
    </div>);
   }
});

ReactDOM.render(<Search />, document.body);

Esto reduce un poco la repetición y obliga a cumplir con las convenciones de nomenclatura, sin embargo, tenga en cuenta que MyComp todavía tendrá una instancia: la forma de omitir se mencionó anteriormente:

{ !hidden && <MyComp ... /> }

Answer 6

Esta es una buena manera de hacer uso del DOM virtual:

Reaccionar:

            var Comp = React.createClass({
                getInitialState: function(){
                return {hide: false};
              },
              toggle: function(){
                this.setState({hide: !this.state.hide});
              },
              render: function() {
                return <div>
                        <button onClick={this.toggle}>toggle</button>    
                    <div className={''hide-'' + this.state.hide}>Hi there</div>
                </div>;
              }
            });

            ReactDOM.render(
              <Comp />,
              document.getElementById(''container'')
            );

CSS

            .hide-true  {
              display: none;
            }

Violín here

Answer 7

Establece un valor booleano en el estado (por ejemplo, ''show)'', y luego hace:

var style = {};
if (!this.state.show) {
  style.display = ''none''
}

return <div style={style}>...</div>

Answer 8

La clave es actualizar el estado del componente en el controlador de clic usando setState . Cuando se aplican los cambios de estado, se vuelve a llamar al método render con el nuevo estado:

var Search = React.createClass({
    getInitialState: function() {
        return { showResults: false };
    },
    onClick: function() {
        this.setState({ showResults: true });
    },
    render: function() {
        return (
            <div>
                <input type="submit" value="Search" onClick={this.onClick} />
                { this.state.showResults ? <Results /> : null }
            </div>
        );
    }
});

var Results = React.createClass({
    render: function() {
        return (
            <div id="results" className="search-results">
                Some Results
            </div>
        );
    }
});

ReactDOM.render(<Search />, document.getElementById(''container''));

http://jsfiddle.net/kb3gN/15084/

Answer 9

Las mejores prácticas se encuentran a continuación según la documentación:

   class FormPage extends React.Component{
      constructor(props){
           super(props);
           this.state = {
             hidediv: false
           }
      }

     handleClick = (){
       this.setState({
          hidediv: true
        });
      }

      render(){
        return(
        <div>
          <div className="date-range" hidden = {this.state.hidediv}>
               <input type="submit" value="Search" onClick={this.handleClick} />
          </div>
          <div id="results" className="search-results" hidden = {!this.state.hidediv}>
                        Some Results
           </div>
        </div>
        );
      }
  }

Renderiza el elemento solo cuando el estado es valido.

Answer 10

Si desea ver cómo alternar la visualización de un componente, haga clic en este violín.

http://jsfiddle.net/mnoster/kb3gN/16387/

var Search = React.createClass({
    getInitialState: function() {
        return { 
            shouldHide:false
        };
    },
    onClick: function() {
        console.log("onclick");
        if(!this.state.shouldHide){
            this.setState({
                shouldHide: true 
            })
        }else{
                    this.setState({
                shouldHide: false 
            })
        }
    },
render: function() {
    return (
      <div>
        <button onClick={this.onClick}>click me</button>
        <p className={this.state.shouldHide ? ''hidden'' : ''''} >yoyoyoyoyo</p>
      </div>
    );
}
});

ReactDOM.render( <Search /> , document.getElementById(''container''));

Answer 11

Ya hay varias respuestas geniales, pero no creo que se hayan explicado muy bien y varios de los métodos dados contienen algunos errores que pueden hacer tropezar a las personas. Así que voy a repasar las tres formas principales (más una opción fuera del tema) para hacer esto y explicar los pros y los contras. Principalmente escribo esto porque la Opción 1 se recomendó mucho y hay muchos problemas potenciales con esa opción si no se usa correctamente.

Opción 1: Representación condicional en el padre.

No me gusta este método a menos que solo vaya a renderizar el componente una vez y lo deje allí. El problema es que hará que Reactive cree el componente desde cero cada vez que alterne la visibilidad. Aquí está el ejemplo. LogoutButton o LoginButton se procesan condicionalmente en el LoginControl principal. Si ejecuta esto, notará que se llama al constructor en cada clic del botón. https://codepen.io/Kelnor/pen/LzPdpN?editors=1111

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {isLoggedIn: false};
  }

  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn;

    let button = null;
    if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }

    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        {button}
      </div>
    );
  }
}

class LogoutButton extends React.Component{
  constructor(props, context){
    super(props, context)
    console.log(''created logout button'');
  }
  render(){
    return (
      <button onClick={this.props.onClick}>
        Logout
      </button>
    );
  }
}

class LoginButton extends React.Component{
  constructor(props, context){
    super(props, context)
    console.log(''created login button'');
  }
  render(){
    return (
      <button onClick={this.props.onClick}>
        Login
      </button>
    );
  }
}

function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

ReactDOM.render(
  <LoginControl />,
  document.getElementById(''root'')
);

Ahora React es bastante rápido para crear componentes desde cero. Sin embargo, todavía tiene que llamar a su código al crearlo. Entonces, si el código de su constructor, componentDidMount, render, etc. es costoso, se demorará significativamente mostrando el componente. También significa que no puede usar esto con componentes con estado en los que desea conservar el estado cuando está oculto (y restaurado cuando se muestra). La única ventaja es que el componente oculto no se crea en absoluto hasta que se selecciona. Por lo tanto, los componentes ocultos no demorarán su carga de página inicial. También puede haber casos en los que QUIERES que se reinicie un componente con estado cuando se active. En cuyo caso esta es tu mejor opción.

Opción 2: Representación condicional en el niño

Esto crea ambos componentes una vez. Luego cortocircuite el resto del código de render si el componente está oculto. También puede cortocircuitar otra lógica en otros métodos usando la hélice visible. Observe la consola.log en la página de código. https://codepen.io/Kelnor/pen/YrKaWZ?editors=0011

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {isLoggedIn: false};
  }

  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn;
    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        <LoginButton isLoggedIn={isLoggedIn} onClick={this.handleLoginClick}/>
        <LogoutButton isLoggedIn={isLoggedIn} onClick={this.handleLogoutClick}/>
      </div>
    );
  }
}

class LogoutButton extends React.Component{
  constructor(props, context){
    super(props, context)
    console.log(''created logout button'');
  }
  render(){
    if(!this.props.isLoggedIn){
      return null;
    }
    return (
      <button onClick={this.props.onClick}>
        Logout
      </button>
    );
  }
}

class LoginButton extends React.Component{
  constructor(props, context){
    super(props, context)
    console.log(''created login button'');
  }
  render(){
    if(this.props.isLoggedIn){
      return null;
    }
    return (
      <button onClick={this.props.onClick}>
        Login
      </button>
    );
  }
}

function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

ReactDOM.render(
  <LoginControl />,
  document.getElementById(''root'')
);

Ahora, si la lógica de inicialización es rápida y los hijos no tienen estado, entonces no verá una diferencia en el rendimiento o la funcionalidad. Sin embargo, ¿por qué hacer que React cree un nuevo componente de todos modos? Sin embargo, si la inicialización es costosa, la Opción 1 se ejecutará cada vez que alterne un componente que ralentizará la página al cambiar. La opción 2 ejecutará todas las entradas del componente en la carga de la primera página. Ralentizando esa primera carga. Debe tener en cuenta de nuevo. Si solo está mostrando el componente una vez en función de una condición y no lo está alternando, o si desea que se reinicie cuando se alterne, entonces la Opción 1 está bien y probablemente sea la mejor opción.

Sin embargo, si la carga lenta de la página es un problema, significa que tiene un código costoso en un método de ciclo de vida y eso generalmente no es una buena idea. Puede, y probablemente debería, resolver la carga lenta de la página moviendo el código costoso fuera de los métodos del ciclo de vida. Muévalo a una función asíncrona que ComponentDidMount ha activado y haga que la devolución de llamada la coloque en una variable de estado con setState (). Si la variable de estado es nula y el componente es visible, entonces haga que la función de render devuelva un marcador de posición. De lo contrario renderizar los datos. De esa manera, la página se cargará rápidamente y llenará las pestañas a medida que se cargan. También puede mover la lógica hacia el padre y enviar los resultados a los hijos como accesorios. De esa manera puedes priorizar qué pestañas se cargan primero. O almacene en caché los resultados y solo ejecute la lógica la primera vez que se muestre un componente.

Opción 3: Ocultación de clase

La ocultación de clases es probablemente la más fácil de implementar. Como se mencionó, usted simplemente crea una clase CSS con display: none y asigna la clase basada en prop. El inconveniente es que se llama al código completo de cada componente oculto y todos los componentes ocultos se adjuntan al DOM. (La Opción 1 no crea los componentes ocultos en absoluto. Y la Opción 2 cortocircuita el código innecesario cuando el componente está oculto y elimina el componente del DOM por completo). Otras respuestas pero no puedo hablar de eso.

Opción 4: un componente pero cambiar los apoyos. O tal vez ningún componente en absoluto y caché HTML.

Este no funcionará para todas las aplicaciones y está fuera de tema porque no se trata de ocultar componentes, pero podría ser una mejor solución para algunos casos de uso que ocultar. Digamos que tienes pestañas. Podría ser posible escribir un componente React y simplemente usar los accesorios para cambiar lo que se muestra en la pestaña. También puede guardar el JSX en las variables de estado y usar un prop para decidir qué JSX devolver en la función de render. Si se debe generar el JSX, hágalo y guárdelo en el padre y envíe el correcto como prop. O genere en el niño y cópielo en el estado del niño y use accesorios para seleccionar el activo.

Answer 12

con la versión más reciente, reaccione 0.11, también puede simplemente devolver nulo para que no haya contenido representado.

https://facebook.github.io/react/blog/2014/07/13/react-v0.11-rc1.html#rendering-to-null

Answer 13

<style type="text/css">
    .hidden { display:none; }
</style>

render: function() {
    return (
      <div className={this.props.shouldHide ? ''hidden'' : ''''}>
        This will be hidden if you set <tt>props.shouldHide</tt> 
        to something truthy.
      </div>
    );
}

Answer 14

export var HidableComponent = (ComposedComponent) => class extends React.Component {
    render() {
        if ((this.props.shouldHide!=null && this.props.shouldHide()) || this.props.hidden)
            return null;
        return <ComposedComponent {...this.props}  />;
    }
};