Реагировать на нажатие кнопок, скрытие и отображение компонентов

Question

У меня есть кнопка, которая показывает и скрывает текст. Когда кнопка нажата, я хочу, чтобы она скрыла другой компонент, и при повторном нажатии она отобразит его.

Я создал ответ здесь:

https://repl.it/repls/DapperExtrasmallOpposites

Я хочу сохранить исходный текст для отображения / скрытия, но также хочу скрыть дополнительный компонент при нажатии кнопки.

Как передать это состояние или как создать оператор if / троичный оператор, чтобы проверить, находится ли он в состоянии показать или скрыть.

Все имеет смысл в приведенном выше ответе!

Answer 1

Чтобы выполнить sh, вы должны принять состояние немного выше. Можно было бы распространить изменения состояния от компонента-переключателя на родительский и затем использовать его любым способом, но это не будет предпочтительным способом go.

Если вы поместите состояние в родительский компонент, который вы можете использовать, передав его через реквизиты нужным компонентам.

import React from "react";

export default function App() {
  // Keep the state at this level and pass it down as needed.
  const [isVisible, setIsVisible] = React.useState(false);
  const toggleVisibility = () => setIsVisible(!isVisible);

  return (
    <div className="App">
      <Toggle isVisible={isVisible} toggleVisibility={toggleVisibility} />
      {isVisible && <NewComponent />}
    </div>
  );
}

class Toggle extends React.Component {
  render() {
    return (
      <div>
        <button onClick={this.props.toggleVisibility}>
          {this.props.isVisible ? "Hide details" : "Show details"}
        </button>
        {this.props.isVisible && (
          <div>
            <p>
              When the button is click I do want this component or text to be
              shown - so my question is how do I hide the component
            </p>
          </div>
        )}
      </div>
    );
  }
}

class NewComponent extends React.Component {
  render() {
      return (
          <div>
              <p>When the button below (which is in another component) is clicked, I want this component to be hidden - but how do I pass the state to say - this is clicked so hide</p>
          </div>
      )
  }
}

Answer 2

Я только что посмотрел на ваш REPL.

Вам нужно иметь состояние видимости в вашем компоненте приложения, а затем передать функцию, чтобы обновить его до компонента Toggle.

Затем он было бы легко условно отобразить компонент NewComponent, например:

render() {
  return (
    <div className="App">
    {this.state.visibility && <NewComponent />}
    <Toggle setVisibility={this.setVisibility.bind(this)} />
    </div>
  );
}

, где функция setVisibility - это функция, которая обновляет состояние видимости.