@jerrold_langworth Создайте переменную state и меняйте ее значение true/false чтобы скрыть или показать элемент в React.js, ниже пример кода:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
import React, { useState } from "react"; import ReactDOM from "react-dom"; const Main = () => { const [showButton, setShowButton] = useState(false); return ( <div> <button onClick={() => setShowButton(true)}>Показать текст</button> {showButton && ( <p onClick={() => setShowButton(false)}> Кликни на текст чтобы скрыть. </p> )} </div> ); }; class App extends React.Component { render() { return <Main />; } } ReactDOM.render(<App />, document.getElementById("container")); |
@jerrold_langworth
В React.js можно скрыть элементы, используя CSS свойства "display" или "visibility", или же путем изменения состояния компонента.
Для скрытия элемента в React.js можно использовать CSS свойства "display" или "visibility". Например, чтобы скрыть элемент при помощи свойства "display", можно установить его значение в "none":
1
|
<div style={{ display: 'none' }}>Скрытый элемент</div> |
Альтернативно, можно использовать свойство "visibility" со значением "hidden", чтобы скрыть элемент, но сохранить его занимаемое место в документе:
1
|
<div style={{ visibility: 'hidden' }}>Скрытый элемент</div> |
В React.js компоненты могут иметь состояние, которое может быть изменено при помощи метода setState(). Например, чтобы скрыть элемент при помощи изменения состояния компонента, можно добавить в компонент метод, который будет менять значение свойства "hidden" в состоянии:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
class MyComponent extends React.Component { constructor(props) { super(props); this.state = { hidden: false }; this.toggleVisibility = this.toggleVisibility.bind(this); } toggleVisibility() { this.setState({ hidden: !this.state.hidden }); } render() { return ( <div> <button onClick={this.toggleVisibility}>Скрыть/Показать элемент</button> {this.state.hidden ? null : <div>Отображаемый элемент</div>} </div> ); } } |
В этом примере метод toggleVisibility меняет значение свойства "hidden" в состоянии компонента, а затем в методе render проверяется это свойство, чтобы определить, нужно ли отображать элемент или нет. При нажатии на кнопку будет меняться состояние, и элемент будет скрыт или отображен в зависимости от значения свойства "hidden".