Как получить реквизит и передать данные от ребенка в reactjs?

У меня есть дочерний компонент, у которого есть кнопка, которая отправляет функцию, которая передает функцию (которую, в конце концов, я хочу отдать приказ обновить список из базы данных, но это не критично для понимания вопроса)

function Connecting ({** refreshList **}) {
  handleClickVariant = () => {
            axios.post .....

            ** refreshList (); **
        };




<Connecting refreshList = {refreshList2} />

Отлично работает!

Проблема в том, что я тоже хочу получить реквизит сторонников.

function Connecting (**props, {refreshList}**) {

Он не распознает функцию refreshList, и я получаю сообщение об ошибке «refreshList не является функцией».

Я понял, что, по-видимому, функция может иметь только одну переменную (props или refreshList).

Можно ли и получить реквизит, и отправить функцию? Или есть другой способ отправить функцию через реквизит?

С Уважением

Источник
Codelisting
за 1 против
Лучший ответ

Реквизит, который вы передаете компоненту, являетсяObject . Таким образом, вы также можете использовать все различные шаблоны деструктурирования. считайте это своим компонентом с 2 реквизитами

  <Connecting refreshList={refreshList} additionalProp={someValue} />

так что ты можешь сделать

function Connecting ({refreshList, additionalProp}) {

Если вы хотите только деструктурироватьrefreshList а не другие реквизиты, тогда вы можете сделать

function Connecting ({refreshList, ...props}) {

      const { additionalProp } = props
 }
за 1 против
function Connecting ({ refreshList }) {
function Connecting (props, {refreshList}) {

Компонентам передается только один параметр, а не два. Этот параметр - объект props. в вашем первом коде вы деструктурируете этот объект, чтобы создать переменнуюrefreshList из props.refreshList. Во втором коде объект props назначается переменнойprops , а затем у вас есть второй параметр, который пытается деструктурировать undefined.

Если вам нужен как объект props, так и переменная refreshList, выполните:

function Connecting (props) {
  const { refreshList } = props;
}
// Or
function Connection (props) {
  const refreshList = props.refreshList;
}
Codelisting
Популярные категории
На заметку программисту