В React можно ли динамически добавлять и удалять элементы?

Question

Я перестраиваю проект (конструктор веб-сайтов с перетаскиванием) в React, который раньше был построен с большим количеством jQuery.

Мне нужно иметь возможность добавлять и удалять элементы внутри одного родительский div, но все, что я могу найти, это методы, которые люди называют «антипаттернами» в реакции. Конечно, есть способ иметь функцию, которая может вставлять некоторую предопределенную html в div и иметь возможность удалить ее также из DOM.

подходить. Кто-нибудь знает, как это сделать?

Может ли использование пакета response- jquery БЕЗОПАСНО добавлять и удалять элементы из DOM? или это немного дрянно?

Answer 1

Да, вы можете добавлять и удалять элементы в React. Вы ищете условный рендеринг .

В JSX с оператором &&

return (
  {showElement && <div>Hello</div>}
)

В JSX с оператором ternary

return (
  {showA ? <div>This is A</div> : <div>This is not A</div>}
)

или вы можете сделать logi c вне возврата в теле Function Component, например:

    const isLoggedIn = this.state.isLoggedIn;
    let button;
    if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }

    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        {button}
      </div>
    );