Что такое метод React.js обработки видимости = скрытый?

Реагирует поддержка атрибута видимости для элементов.

Итак, если я хочу показать или скрыть элемент на странице, но все-таки у вас есть место при скрытии, так что макет не сдвинется, как мне сделать что-то вроде этого?

<i className="fa fa-trash" visibility={this.state.showButton ? "visible": "hidden"} />

Ответ 1

Вы можете использовать для этого класс CSS и динамически изменять свое имя класса. Например:

<i className={this.state.showButton ? "fa fa-trash" : "fa fa-trash hidden"} />

Ответ 2

Вы можете использовать CSS для этого.

<i className="fa fa-trash" style={{visibility: this.state.showButton ? 'visible' : 'hidden' }} />

Подробнее о встроенных стилях в React

Ответ 3

Это css-атрибут, поэтому вы можете использовать встроенные стили:

...
var visibilityState = this.state.showButton ? "visible" : "hidden";
return (
  <i className="fa fa-trash" style={{visibility: visibilityState}}/>
);
...

Ответ 4

Хотя принятый ответ работает отлично, я хочу упомянуть classnames NPM package как альтернативный способ его реализации в более DRY- дружелюбно. С этим пакетом вам не нужно копировать другие статические классы между двумя строками:

<i className={classNames("fa", "fa-trash", {"hidden": !this.state.showButton})} />

Ответ 5

Вы можете использовать интерполяцию строк, чтобы добавить класс CSS:

<i className={'fa fa-trash ${this.state.showButton ? "" : "hidden"}'} />

Ответ 6

Или вы можете просто сделать это в своем компоненте реакции

{
   this.state.showButton && <i className="fa fa-trash"  />
}

// Get a hook function
const {useState} = React;

const Example = ({title}) => {
  const [visible, setVisible] = useState(false);

  return (
    <div>
      <p>{title}</p>
      
      <button onClick={() => setVisible(!visible)}>
        visibility : {!visible ? "hidden" : "showing"}
      </button>
      {visible && <p>Its toggling visibility</p>}
    </div>
  );
};

// Render it
ReactDOM.render(
  <Example title="Example using Hooks:" />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>