Переключение между двумя div или текстом с помощью крючков React - PullRequest
Новая
       8

Переключение между двумя div или текстом с помощью крючков React

0 голосов
/ 12 июля 2020

Прежде всего, я новичок в React и Hooks.

Я бы хотел, чтобы при изменении состояния менялся div или какой-то текст.

Итак, для пример: 

const App = ( ) => {

    const [textToggle, textToggleState] = useState(true)

    return (

        <div>This is come text</div>
        <div>This is come extra text</div>
        <div onClick={ () => textToggleState(!textToggle) }>Click me</div>
    );
};

export default memo(App);

Итак, в этом случае у меня есть кнопка переключения, которая будет переключать между истинным или ложным состоянием. Я обычно использую для добавления / удаления класса из div, например: 

<div className={textToggle ? "normal-class" : "super-class"}></div>

Или что-то подобное. Однако то, что я хотел бы достичь, - это переключаться между показом двух первых div в приведенном выше коде или просто добавлять слово extra в первое, когда когда-либо инициируется переключение.

Я не совсем знаете, как этого добиться, и нужно ли это сделать с помощью функции useState.

1 Ответ

2 голосов
/ 12 июля 2020

, если вы просто хотите показать / скрыть каждый div соответственно, попробуйте это 

{textToggle && <div>This is come text</div>}
{!textToggle && <div>This is come extra text</div>}

или упрощенный 

{
 textToggle ?
  <div>This is come text</div>
 :
  <div>This is come extra text</div>
}

, если вы хотите добавить текст extra, попробуйте это 

<div>This is come {textToggle ? "" : "extra"} text</div>
...