Передача функции в качестве поддержки в другом компоненте

ProgramBox

Передача функции в качестве поддержки в другом компоненте

Post author:admin
Запись опубликована:14 марта, 2023
Post category:Вопросы по программированию

#javascript #reactjs #react-native #rxjs #react-router

#javascript #reactjs #реагировать — родной #rxjs #реагировать-маршрутизатор

Вопрос:

Я пытаюсь передать функцию внутри компонента в качестве поддержки другому компоненту.

У меня есть следующее:

 // Parent Component
import React, { useState } from 'react';
const IncrementingCount = () => (
   const [count, setCount] = useState(0)
   const increment = () => {
     return setCount(count  1)
   };
   <ul>
     <li>
       My count:{count} <IncreaseCount onclick={IncrementingCount} />
     </li>
   </ul>
)
    
//Child component
import React from 'react'
const IncreaseCount = (IncrementingCount) => {
  return (
    <button onClick={IncrementingCount}> Click Me </button> 
  );
};

Я совершенно новичок в React.

Ответ №1:

Здесь есть пара синтаксических проблем.

Я предлагаю вам ознакомиться с основами react здесь, чтобы убедиться, что вы твердо придерживаетесь основных принципов. https://reactjs.org/tutorial/tutorial.html

IncreaseCount — это ваш дочерний компонент, поэтому вам нужно передать что-то в его реквизит, указав атрибут. Их можно назвать как угодно, но я бы предпочел избегать значений по умолчанию, таких как onclick, поскольку они используются для кнопок html. (если только ваш компонент не является кнопкой или не имеет поведение, подобное кнопке). Здесь я думаю, что хорошим именем было бы onIncrementCount или что-то подобное.

Значение внутри onIncrementCount={VALUE} — это то, что вы передаете. Таким образом, это должна быть функция, которая увеличивает количество. Я снова переименовал это — хороший шаблон — это реквизит для использования on-prefix, а для обработчиков — для использования handle-prefix .

   <IncreaseCount onIncrementCount={handleIncrementCount} />

 const IncrementingCount = () => (
  const [count, setCount] = useState(0)

  // This is the handler function you'll pass to your child IncreaseCount component
  const handleIncrementCount = () => {
    return setCount(count  1)
  };

  <ul>
    <li>
      My count:{count} <IncreaseCount onIncrementCount={handleIncrementCount} />
    </li>
  </ul>
)

Наконец, в вашем дочернем компоненте — вы получаете доступ к функции через аргумент props. Здесь это имя, которое вы привязали к here <IncreaseCount onIncrementCount={handleIncrementCount} /> — onIncrementCount, поэтому вам нужно props.onIncrementCount .

 //Child component
import React from 'react'

const IncreaseCount = (props) => {
  return (
    <button onClick={props.onIncrementCount}> Click Me </button> 
  );
}

1. Спасибо, я думаю, что я прыгнул глубоко, не зная, как плавать. Вы правы, я читаю о реквизите и пытаюсь его понять, и столкнулся с этой проблемой.

2. Не беспокойтесь — это легко сделать! Не могли бы вы принять ответ, если он решит вашу проблему?

Ответ №2:

Вам нужно передать increment ее в качестве опоры своему дочернему элементу, после чего вы сможете получить доступ к функции, используя props.onClick в дочернем элементе.

Доступ к каждому реквизиту, который вы передали компоненту, можно получить из props object .

 import React from  'react'

const IncrementingCount = () => {
  const [count, setCount] = React.useState(0)

  const increment = () => {
    return setCount(count  1)
  };

  return <ul>
    <li>
      My count:{count} <IncreaseCount onClick={increment} />
    </li>
  </ul>
}


const IncreaseCount = (props) => {
  return <button onClick={props.onClick}> Click Me </button> 
}

Что еще более важно, сначала изучите основы React. Посмотрите несколько видеоуроков о React. а затем создайте проект самостоятельно.

1. Спасибо, как вы упомянули, мне нужно узнать немного больше, а не пытаться выполнять задачи или создавать проекты.

2. не беспокойтесь — мы все были там! Без сомнения, вы слышали это миллион раз, но потратив время сейчас, вы сэкономите время в будущем

Ответ №3:

Проверьте это. https://codesandbox.io/s/stackoverflow64102251-j4eoi

Я исправил ваш код. Прочитайте документацию React или посмотрите учебные пособия Youtube. У вас впереди долгий путь.

 import React, { useState } from "react";

const IncrementingCount = () => {
  const [count, setCount] = useState(0);
  const increment = () => {
    return setCount(count   1);
  };

  return (
    <ul>
      <li>
        My count:{count}
        <IncreaseCount IncrementingCount={increment} />
      </li>
    </ul>
  );
};

//Child component
// import React from 'react'
const IncreaseCount = (props) => {
  const { IncrementingCount } = props;
  return <button onClick={IncrementingCount}> Click Me </button>;
};