Блог

Главная - Вопросы по программированию - Как передавать данные из разных функциональных компонентов?

Как передавать данные из разных функциональных компонентов?

#reactjs #react-hooks

Вопрос:

Я новичок в реагировании, и я использую функциональные компоненты, и у меня есть 5 функциональных компонентов. Что я хочу сделать, так это получить все данные от всех функциональных компонентов до самого последнего компонента, когда пользователь нажимает «Отправить».

Комментарии:

1. Какой-нибудь код мог бы помочь. О каких «данных» вы говорите ? Скорее всего, вам нужно будет предоставить каждому компоненту опору с методом «обновления» компонента контейнера, который будет собирать каждое изменение, а затем передавать его последнему компоненту. Читать reactjs.org/docs/lifting-state-up.html

Ответ №1:

Вы можете проверить это в Api контекста React.

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

Или, если вы думаете, что это будет слишком сложно, вы можете поднять свое состояние до ближайшего общего предка, а затем передать их в качестве реквизита. (Я думаю, что это еще большая проблема).

Для этого вы можете проверить состояние подъема

Ответ №2:

Есть несколько способов сделать это. Это зависит от размера вашего приложения. Если ваше приложение будет небольшим, вы можете использовать API контекста React или mobx для управления состоянием.

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

Если вы не хотите использовать какую-либо другую библиотеку, вы можете архивировать эти материалы в React inbuild, управляя state . Но для этого вам нужно передать значение, как props в вашем дочернем компоненте.

 import React from "react";
import PropTypes from "prop-types";

/**
 * Component for showing details of the user.
 *
 * @component
 * @example
 * const age = 21
 * const name = 'Jitendra Nirnejak'
 * return (
 *   <User age={age} name={name} />
 * )
 */
const User = (props) => {
  const { name, age } = props;
  return (
    <p>
      {name} is {age} years old.
    </p>
  );
};

User.propTypes = {
  /**
   * User's name
   */
  name: PropTypes.string.isRequired,
  /**
   * User's age
   */
  age: PropTypes.number,
};

User.defaultProps = {
  text: "Asif Vora",
  age: 21,
};

export default User;

Используйте дочерний компонент в родительском.

 import React from "react";
import User from "./User";

const Parent = () => {
  return (
    <User name="abc" age={15} />
  );
};

export default Parent;
Метки: