Есть ли способ передать группу реквизита в реакцию?

Question

Способ, которым я на самом деле пользуюсь, работает хорошо, но мои реквизиты продолжают расти, и мне интересно, могу ли я сгруппировать их в одно состояние и передать их ребенку, это мой код:

    <Panel
      uniqueIDs={uniqueIDs}
      userID={userID}
      loading={loading}
      premium={premium}
      percent={percent}
      total={total}
      until={until}
      user={user}
      done={done}
    />

Послеrender Я определяю эти переменные следующим образом:

let {загрузка, пусто, итог, уникальные идентификаторы, срез, процент, пока, хорошо, пользователь, премиум, данные, ключи, сделано, userID} = this.state;

Могу ли я просто отправить this.state переменную?Я провел небольшое исследование, но не нашел решения своей проблемы, я знаю, что могу использовать сторонние библиотеки для управления состоянием, но я стараюсь сделать его простым.

Answer 1

вы можете сделать объект для реквизита, который вы отправляете, и можете использовать оператор распространения

  let props = {
        uniqueIDs : uniqueIDs,
        userID:userID,
        loading:loading,
        premium:premium
          }
<Panel {...props} />

В компоненте панели вы можете использовать this.props.uniqueIDs и т. Д.

Answer 2

Да, вы определенно можете просто передать всю переменную состояния в дочерний компонент как несколько свойств

<Child {...this.state}/>

Это было бы вполне приемлемо.

Если ваш штат {id: 1, name: 2}

Вы по-прежнему сможете получить доступ к реквизитам вашего дочернего компонента как

props.id or this.props.id
props.name or this.props.name

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

Чтобы обойти это, используйте такие методы, как componentDidUpdate() для компонентов класса и react-hooks для функциональных компонентов. Это может помочь контролировать процесс повторного рендеринга.