Показать или скрыть элемент в React

Я впервые работаю с React.js и не могу найти способ показать или скрыть что-то на странице через событие click. Я не загружаю на страницу никакие другие библиотеки, поэтому я ищу какой-то нативный способ с использованием библиотеки React. Вот что у меня есть на данный момент. Я хотел бы показывать div с результатами, когда срабатывает событие click. 

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);
Damjan Pavlica
Редактировал вопрос 8-го мая 2018 в 12:02
Программирование
javascript reactjs
1-го июля 2014 в 5:17
26 просмотров
Комментарии к вопросу (6)
Решение

Ключевым моментом является обновление состояния компонента в обработчике клика с помощью setState. Когда изменения состояния будут применены, метод render будет вызван снова с новым состоянием:

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 ?  : null }
            </div>
        );
    }
});

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

ReactDOM.render(  , document.getElementById('container'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.min.js"></script>

<div id="container">

</div>

[JSFiddle][1]

Комментарии (5)
 

    .hidden { display:none; }

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

// or in more modern JS and stateless react
const Example = props => <div className={props.shouldHide}/>Hello</div>
John Haugeland
Редактировал ответ 28-го апреля 2019 в 2:26
Комментарии (13)

Вот альтернативный синтаксис тернарного оператора: 

{ this.state.showMyComponent ?  : null }

эквивалентно:

{ this.state.showMyComponent &&  }

Худой почему

Также альтернативный синтаксис с дисплей: &#39;Нет&#39;;

Однако, если вы злоупотребляете дисплей: &#39;Нет&#39;, это приводит к загрязнению дом и в конечном итоге замедляет приложение.

Комментарии (0)

Вот мой подход, используя ЕС6. В то время как принятый ответ правильный, он'ы довольно устарели.

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() {
    this.setState(oldState => ({ isOpened: !oldState.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((

    <div>Some content</div>

), document.getElementById('app'));

Демо: http://jsfiddle.net/kb3gN/16688/

Это's лучше, чтобы представить некоторый элемент только в случае необходимости, нежели добавив некоторые классы CSS с дисплей: нет. Если вы установитедисплей: нет` - элемента, оказываемых реагировать и добавил в " дом " - это может плохо сказаться на производительности.

Представьте, что у вас есть страница с вкладками, где каждая вкладка имеет много контента и, где только 1 вкладка открывается сразу. Это'ы гораздо лучше держать в " дом " только те элементы, которые должны быть отображены.

В выше код, чтобы добиться этого, я'м, используя следующий код:

{opened && }

Что сделает SomeElement только если открыт истинно. Это работает, потому как на JavaScript решения логических условий:

true && true && 2; // will output 2
true && false && 2; // will output false
true && 'some string'; // will output 'some string'
opened && ; // will output SomeElement if `opened` is true, will output false otherwise
Комментарии (3)

с новейшей версией реагировать 0.11 вы также можете просто вернуть null, чтобы не содержимое представленное.

Оказывая в Null

Rich Warrior
Редактировал ответ 21-го августа 2019 в 7:00
Комментарии (0)

Я создал небольшой компонент, который обрабатывает это для вас: реагирую-переключение-дисплей

Он устанавливает атрибут стиля `дисплей: нет !важно на основе реквизит "скрыть" или "показать".

Пример использования:

в 

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} />



            </div>
        );
    }
});

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

React.renderComponent(, document.body);
Rich Warrior
Редактировал ответ 14-го августа 2019 в 6:15
Комментарии (0)

Уже есть несколько ответов, но я Дон'т думаю, что они'вэ были очень хорошо объяснены и некоторые из приведенных методов содержит несколько подводных камней, которые могут сбить людей. Поэтому я'м собираюсь перейти на трех основных способов (плюс один не по теме вариант) для этого и объяснить плюсы и минусы. Я'м в основном пишу это, потому что Вариант 1 был рекомендован много и там'много потенциальных проблем с этим вариантом, если не используется правильно.

Вариант 1: условное отображение в родительской.

Я Дон'т нравится этот метод, если вы не'повторно только собирается оказать компонент один раз и оставить его там. Вопрос это вызовет реагировать на создание компонента с нуля каждый раз, когда вы переключаться между режимами отображения. Здесь'ы например. LogoutButton или LoginButton были условно трактованные в Родительском LoginControl. Если вы выполните это, вы'МР видеть конструктор вызывается на каждой кнопке мыши. 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 = ;
    } else {
      button = ;
    }

    return (
      <div>

        {button}
      </div>
    );
  }
}

class LogoutButton extends React.Component{
  constructor(props, context){
    super(props, context)
    console.log('created logout button');
  }
  render(){
    return (

        Logout

    );
  }
}

class LoginButton extends React.Component{
  constructor(props, context){
    super(props, context)
    console.log('created login button');
  }
  render(){
    return (

        Login

    );
  }
}

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

ReactDOM.render(
  ,
  document.getElementById('root')
);

Сейчас реагируют довольно быстро на создание компонентов с нуля. Однако, его все равно придется называть код при ее создании. Так что если ваш конструктор, componentDidMount, визуализации и т. д. код-это дорого, то это'Лл существенно замедлить отображения компонента. Это также означает, что вы не можете использовать это с компонентами состояния, где вы хотите, чтобы государство было сохранено, когда скрытые (и восстановлена, когда появится.) Одно из преимуществ заключается в том, что скрытый компонент это'т на всех, пока он'ы выбрали. Так что скрытые компоненты выиграл't задержка вашей начальной странице загрузки. Там также может быть случаи, когда вы хотите, чтобы компонент состояния сброса при включении. В этом случае это оптимальный вариант.

Вариант 2: условное отображение в ребенка

Это создает сразу оба компонента. Затем коротких замыканий остальной код render, если компонент будет скрыт. Вы также можете короткое замыкание другой логики в использовании других методов видимой опоры. Обратите внимание на консоли.войдите в страницу сайт CodePen. 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>



      </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 (

        Logout

    );
  }
}

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

        Login

    );
  }
}

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

ReactDOM.render(
  ,
  document.getElementById('root')
);

Теперь, если по логике инициализации быстрая и детей без гражданства, то вы выиграли'т вижу разницы в производительности или функциональных возможностей. Однако, зачем реагировать в любом случае создать новый компонент абсолютно каждый тумблер? Если же инициализация дорого, Вариант 1 будет выполняться каждый раз, когда вы переключаетесь компонент, который будет тормозить страницу вниз при переключении. Вариант 2 будет работать весь компонент'ы иниц при первой загрузке страницы. Замедляется, что в первую нагрузка. Следует еще раз отметить. Если вы're просто показывая компонента один раз в зависимости от условия и не переключение его, или вы хотите его сбросить, когда toggledm, то Вариант 1-это прекрасно и, вероятно, лучший вариант.

Однако, если замедление загрузки страницы является проблемой, это означает, что вы've получили дорогостоящее код в методе жизненного цикла и что'ы вообще не очень хорошая идея. Можно, и наверное нужно, решить медленной загрузки страницы, перемещая дорогостоящее код из методов жизненного цикла. Переместить его в асинхронной функции, что'ы скинула ComponentDidMount и обратный вызов, положил его в переменной состояния при выполнении функция setState(). Если государство переменная имеет значение null, и компонент виден, то есть функция визуализации вернуть заполнитель. В противном случае отображения данных. Таким образом, страницы будут быстро загружаться и заполнения вкладки во время загрузки. Вы также можете переместить логику в родительской и продвигать результаты для детей в качестве реквизита. Таким образом, вы можете определиться в том, какие вкладки загружаются в первую очередь. Или кэшировать результаты и работать только логика впервые показано компонент.

Вариант 3: Скрытие Класс

Прячась класс-это, пожалуй, самый простой в реализации. Как уже упоминалось, вы просто создать класс CSS с помощью display: none и присвоить класс на основе проп. Недостатком является весь код каждый скрытый компонент называется и все скрытые компоненты прикреплены к DOM. (Вариант 1 Не'т создать скрытые компоненты на всех. И Вариант 2 короткого замыкания, ненужного кода, когда компонент будет скрыт и удаляет компонент из Дом.) Оказывается, это быстрее в переключение видимости по несколько тестов сделано комментаторов на другие ответы, но я могу'т скажу.

Вариант 4: один компонент, а реквизит изменение. Или, может быть, ни один компонент на все и кэш в формате HTML.

Этот выиграл't работа для каждого приложения, и это'ы не по теме, потому что он's не о скрытии компонентов, но это может быть лучшим решением в некоторых случаях, чем прятаться. Позвольте'ы сказать, что у вас закладках. Можно написать один компонент реагировать и просто использовать реквизит, чтобы изменить то, что's, отображаемому в разделе. Вы также можете сохранить JSX для переменных состояния и использовать реквизит, чтобы решить, какие JSX, чтобы вернуться в функцию render. Если JSX должен генерироваться тогда сделай это и кэшировать его в родительской и отправить правильный один в качестве опоры. Или создать в детской и кэшировать его в ребенка'государство и использовать реквизит, чтобы выбрать активный.

Комментарии (0)

Вы устанавливаете булево значение в состоянии (например, 'show)', а затем делаете:

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

return <div style={style}>...</div>
Комментарии (5)

Это хороший способ, чтобы использовать виртуальный дом:

`` класс переключение расширяет реагировать.Компонент { состояние = { показать: True, }

тумблер = () => В этом.выполнении функция setState((текущем состоянии currentstate) => ({- шоу: !текущем состоянии currentstate.показать}));

рендер() { возвращение ( <див> <кнопка функция onclick={этот.тумблер}> включено: {этот.государства.показать ? 'шоу' : 'скрыть'} < кнопка/> {этот.государства.шоу && <див>Привет</див>} </див> ); } } `` Пример здесь

Использование реагируют крючки:

`` константный тумблер = () => { константный [показать, toggleShow] = реагировать.useState(истина);

возвращение ( <див> кнопка < функция onclick={() => toggleShow(!шоу)}

тумблер: {показать ? 'шоу' : 'скрыть'} < кнопка/> {шоу && <див>Привет</див>} </див> ) } ``

Пример здесь

daniloprates
Редактировал ответ 20-го ноября 2019 в 1:51
Комментарии (3)

Рекомендуется ниже, в соответствии с документацией:

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

Отрисовки элемента только тогда, когда государство действует.

ravibagul91
Редактировал ответ 15-го сентября 2019 в 10:02
Комментарии (1)

Я начинаю с этим заявление от команды реагирует:

В реакции, вы можете создать отдельные компоненты, которые инкапсулируют поведение вам нужно. Затем можно отображать только некоторые из них, в зависимости от состояние приложения.

условного перевода в реагируют так же условия работы в в JavaScript. Использовать операторы JavaScript, как если или условный оператор для создания элементов, представляющих текущее состояние, и пусть обновление реагировать пользовательского интерфейса, чтобы соответствовать их.

Вы в основном должны показать компонент, когда кнопка будет нажата, вы можете сделать это двумя способами, с использованием чистого реагировать или с помощью CSS, с использованием чистого реагировать так, вы можете сделать что-то вроде ниже код в вашем случае, поэтому в первой гонке, результаты не отображаются как hideResults в true, но при нажатии на кнопку, состояние изменится и hideResultsравноfalse` и компонент визуализируется снова с новым значением условия, это очень часто используется для изменения вида компонента в реагируют...

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 &&  }
      </div> );
  }

});

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

ReactDOM.render(, document.body);

Если вы хотите сделать дальнейшие исследования в условное отображение в реагируют, смотрите здесь.

Alireza
Редактировал ответ 17-го апреля 2019 в 4:15
Комментарии (1)
   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>
        );
      }
  }
Комментарии (0)

Если вы хотите, чтобы увидеть, как включить отображение компонента кассе эту скрипку.

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>
        click me
        <p className={this.state.shouldHide ? 'hidden' : ''} >yoyoyoyoyo</p>
      </div>
    );
}
});

ReactDOM.render(  , document.getElementById('container'));
Комментарии (0)

В некоторых случаях более высоким компонентом порядке, могут быть полезными:

Создать более высокий компонент порядке:

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

Расширить свой собственный компонент:

export const MyComp= HidableComponent(MyCompBasic);

Затем вы можете использовать его как это:

Это уменьшает немного шаблонный и принуждает придерживаться соглашения об именовании, однако следует помнить о том, что MyComp будут создается - способ опустить-это было сказано:

{ !скрытые && <MyComp ... /> }

Комментарии (0)

использовать ссылка и манипулировать CSS

Одним из способов может быть использование реагируют'ы реф и манипулировать CSS-класс с помощью браузера'ы по API. Его польза в том, чтобы избежать перерисовку в реакцию, если единственной целью является, чтобы скрыть/показать элемент какой-то дом на нажатие кнопки. 

// Parent.jsx
import React, { Component } from 'react'

export default class Parent extends Component {
    constructor () {    
        this.childContainer = React.createRef()
    }

    toggleChild = () => {
        this.childContainer.current.classList.toggle('hidden')
    }

    render () {
        return (
            ...

            Toggle Child
            <div ref={this.childContainer}>

            </div>

            ...
        );
    }
}

// styles.css
.hidden {
    display: none;
}

ЗЫ поправьте меня, если я ошибаюсь. :)

Комментарии (1)

Используйте РК-если-то модуль

Яш НПМ установки-сохранить РК-если-еще

``Яш импорт реагируют с 'реагировать'; импорт { если } с 'РК-если-то';

приложение класс расширяет реагировать.Компонент { рендер() { возвращение ( <если условие={этот.реквизит.showResult}> Некоторые Результаты </если> ); } } ``

Комментарии (0)

Вот идет простой, эффективный и лучше всего с бесклассовым реагировать компонент для отображения/скрытия элементов. Использование реагировать-крюки, который доступен в последней версии создать-реагировать-приложение что реагировать 16

import React, {useState} from 'react';
function RenderPara(){
const [showDetail,setShowDetail] = useState(false);

const handleToggle = () => setShowDetail(!showDetail);

return (

    <h3>
        Hiding some stuffs 
    </h3>
    Toggle View
   {showDetail && <p>
        There are lot of other stuffs too
    </p>}
)

}  
export default RenderPara;

Удачи В Кодировании :)

Комментарии (0)

Если вы используете бутстрап 4, Вы можете скрыть элемент этак

className={this.state.hideElement ? "invisible" : "visible"}
Комментарии (0)

Это также может быть достигнуто такой (очень простой способ)

 class app extends Component {
   state = {
     show: false
   };
 toggle= () => {
   var res = this.state.show;
   this.setState({ show: !res });
 };
render() {
  return(
    Toggle 
  {
    this.state.show ? (<div> HELLO </div>) : null
  }
   );
     }
Комментарии (1)

этот пример показывает, как вы можете переключиться между компонентами с помощью переключателя, который переключает через каждые 1сек 

import React ,{Fragment,Component} from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const Component1 = () =>(
  <div>

   </div>
)

const Component2 = () => {
  return (
    <div>

  </div>
   )

 }

 class App extends Component {
   constructor(props) {
     super(props);
    this.state = { 
      toggleFlag:false
     }
   }
   timer=()=> {
    this.setState({toggleFlag:!this.state.toggleFlag})
  }
  componentDidMount() {
    setInterval(this.timer, 1000);
   }
  render(){
     let { toggleFlag} = this.state
    return (

        {toggleFlag ?  : }

    )
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);
Комментарии (1)