Реакт, ошибка в рендеринге элемента в зависимости от наличия класса

Рейтинг: 0Ответов: 1Опубликовано: 09.08.2023

Может кто подсказать, что не верно здесь? Всё скомпилилось, но консоль локалхоста разрывается от кучи ошибок. Идея была в том, чтобы реализовать условный рендеринг в зависимости от наличия или отсутствия 'active'. Если класса нет, то кнопка, если есть, то input`ы. Но до существования самих инпутов пока не дошло, потому что итак не работает даже с дивами.

import React, { useRef } from 'react';


const CostButton = () => {

    const classCheck = useRef('my-class');

    const clickHandler = e => {
        e.currentTarget.classList.toggle('active')
        console.log(e.currentTarget)
    };

    const handleButtonClick = () => {
        const myElement = classCheck.current;
        if (myElement.classList.contains('my-class')) {
          console.log('Класс присутствует на элементе');
        } else {
          console.log('Класс не найден на элементе');
        }
      };

    return ( 
        <div>
      <div className='my-class' onClick={clickHandler} ref={classCheck}>
        <h1>Example</h1>
      </div>
      <button onClick={handleButtonClick}>Проверить класс</button>
      {classCheck.current.classList.contains('active') ? (
        <div>'sssss...'</div>
      ) : (
        <button onClick={clickHandler}>Call me!!</button>
      )}
    </div>
    );
}

export default CostButton;
reactjs
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

Идея была в том, чтобы реализовать условный рендеринг

Вот так можно организовать "условный рендеринг".

//
function Frm() {
  return <form>
    <input />
    <button>Отправить</button>
  </form>
}
//
function Btn({act}) {
  return <button onClick={act}>Позвонить</button>
}
//
function App() {
  const [type, setType] = React.useState(false)
  const act = _ => setType(!type)
  return <section>
    {type ? <Frm /> : <Btn act={act} />}
  </section>
}

const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(<App />);
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<div id="like_button_container"></div>