Блог

Главная - Вопросы по программированию - Как изменить стиль HTML-элемента в React?

Как изменить стиль HTML-элемента в React?

#reactjs

Вопрос:

У меня есть два компонента реакции

 class App extends React.Component {
  render() {
    return (
      <div id="appWrapper">
        <ConfigureWindow />
        <button id="configureClocksButton">Configure clocks</button>
        <section id="clocksHere"></section>
      </div>
    );
  }
}
 
 const ConfigureWindow = () => (
  <div id="configureWindowWrapper">
    <div id="configureWindow">
      <section id="addCitySection">TODO: adding a city</section>
      <div id="verticalLine"></div>
      <section id="listOfCities">
        <header>
          <h1>Available cities</h1>
          <div id="closeConfigureWindowWrapper">
            <img src="..srcimagesexit.png" id="closeConfigureWindow" alt="" />
          </div>
        </header>
        <section id="availableCities"></section>
      </section>
    </div>
  </div>
);

Я хочу, чтобы «ConfigureWindow» отображался при «configureClocksButton». Я попытался выполнить его с реквизитами, состоянием и функцией, но получил ошибки. Также было бы неплохо, если бы вы объяснили мне, как создавать новые компоненты React с функциями React?

Комментарии:

1. Немного сложно понять ваш пост, но я так понимаю, вы хотите нажать кнопку id="configureClocksButton" и что-то сделать с ConfigureWindow компонентом?

2. Да. id=»configureClocksButton» — это кнопка, которую пользователь нажимает, чтобы отобразить окно конфигурации

Ответ №1:

Вы, вероятно, хотите использовать реакцию.JS событие onClick (https://reactjs.org/docs/handling-events.html), и состояние для хранения действия. Чтобы создать функциональный компонент, вам просто нужно вернуть JSX, который вы хотите отобразить, и использовать крючки (https://reactjs.org/docs/hooks-intro.html), а затем выполните условный рендеринг (https://reactjs.org/docs/conditional-rendering.html):

 const App = () => {
    const [toggleConfiguration, setToggleConfiguration] = useState(false)

    return (
      <div id="appWrapper">
        {toggleConfiguration amp;amp; <ConfigureWindow />}
        <button onClick{() => setToggleConfiguration(true)} id="configureClocksButton">Configure clocks</button>
        <section id="clocksHere"></section>
      </div>
    );
}

Комментарии:

1. Что нужно изменить в окне конфигурации, чтобы оно работало?

2. Вам не нужно изменять компонент ConfigureWindow.

Ответ №2:

Немного сложно понять ваш пост, но я понимаю, что вы хотите нажать на кнопку id="configureClocksButton" и условно отобразить ConfigureWindow компонент.

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

 class App extends React.Component {
  this.state = {
    showConfigureWindow: false,
  }

  toggleShowConfigureWindow = () => this.setState(prevState => ({
    showConfigureWindow: !prevState.showConfigureWindow,
  }))

  render() {
    return (
      <div id="appWrapper">
        {showConfigureWindow amp;amp; <ConfigureWindow />}
        <button
          id="configureClocksButton"
          onClick={this.toggleShowConfigureWindow}
        >
          Configure clocks
        </button>
        <section id="clocksHere"></section>
      </div>
    );
  }
}

Функциональный компонент, эквивалентный:

 const App = () => {
  const [showConfigureWindow, setShowConfigureWindow] = React.useState(false);

  const toggleShowConfigureWindow = () => setShowConfigureWindow(show => !show);
  
  return (
    <div id="appWrapper">
      {showConfigureWindow amp;amp; <ConfigureWindow />}
      <button
        id="configureClocksButton"
        onClick={toggleShowConfigureWindow}
      >
        Configure clocks
      </button>
      <section id="clocksHere"></section>
    </div>
  );
}
Метки: