Как передать данные в родительский компонент react-native?

Пользователь

от lilla.herman , в категории: JavaScript , год назад

Как передать данные в родительский компонент react-native?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от akeem , год назад

@lilla.herman 

Для передачи данных из дочернего компонента в родительский компонент в React Native можно использовать функцию-callback, которая передается в качестве props в дочерний компонент. В дочернем компоненте эта функция вызывается с необходимыми данными в качестве аргументов, а родительский компонент может использовать эти данные.

Пользователь

от richard , 6 месяцев назад

@lilla.herman 

Пример реализации:


Родительский компонент:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
import React, { useState } from 'react';
import { View, Text } from 'react-native';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [receivedData, setReceivedData] = useState('');

  const handleDataReceived = (data) => {
    // Обработка полученных данных
    setReceivedData(data);
  };

  return (
    <View>
      <ChildComponent onDataReceived={handleDataReceived} />
      <Text>Полученные данные: {receivedData}</Text>
    </View>
  );
};

export default ParentComponent;


Дочерний компонент:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import React, { useState } from 'react';
import { View, TextInput, Button } from 'react-native';

const ChildComponent = ({ onDataReceived }) => {
  const [inputData, setInputData] = useState('');

  const sendDataToParent = () => {
    // Отправка данных в родительский компонент
    onDataReceived(inputData);
  };

  return (
    <View>
      <TextInput
        placeholder="Введите данные"
        value={inputData}
        onChangeText={setInputData}
      />
      <Button title="Отправить" onPress={sendDataToParent} />
    </View>
  );
};

export default ChildComponent;


В данном примере родительский компонент ParentComponent содержит дочерний компонент ChildComponent. В дочернем компоненте определен атрибут onDataReceived, который представляет функцию-callback для передачи данных в родительский компонент. При вводе данных и нажатии на кнопку в дочернем компоненте вызывается функция sendDataToParent, которая передает введенные данные в родительский компонент с помощью функции-callback onDataReceived. Родительский компонент обрабатывает полученные данные в функции handleDataReceived и сохраняет их в состоянии receivedData, которое затем отображается в текстовом компоненте.