如何在 React Native 中将矢量从类组件传递到另一个组件？

Posted 2023-02-23

【中文标题】如何在 React Native 中将矢量从类组件传递到另一个组件？

【英文标题】：How to communicate vector from a class component to another component in React Native?

【发布时间】：2021-10-18 12:53:10

【问题描述】：

我正在尝试将 LetterVec 从 ClassComponent 类传递到 TextComponent 类，以便我可以在那里显示它。下面是 ClassComponent 类的代码：

import React, Component from 'react';
import View, Text, StyleSheet, Button, FlatList from 'react-native';

class ClassComponent extends Component 
  constructor(props) 
    super(props);
    this.state = 
      letterVec: ['B'],
    ;
  

  render() 
    return (
      <View>
        <Button
          title='Add A'
          onPress=() => 
            this.setState(
              (this.state.letterVec = [...this.state.letterVec, 'A']),
            );
          
        />
        <FlatList
          keyExtractor=(item, index) => index.toString()
          data=this.state.letterVec
          renderItem=(item) => 
            return <Text>item</Text>;
          
        />
      </View>
    );
  


const styles = StyleSheet.create();

export default ClassComponent;

这是 TextComponent 的代码：

import React from 'react';
import View, Text, StyleSheet from 'react-native';
import ClassComponent from './ClassComponent';

const TextComponent = () => 
  const classC = new ClassComponent();

  return (
    <View>
      <Text>Text Component, classC.state.letterVec</Text>
    </View>
  );
;

const styles = StyleSheet.create();

export default TextComponent;

我已经能够让 TextComponent 显示 letterVec，但是当我在 ClassComponent 屏幕上更新它时，它没有在 TextComponent 屏幕上更新。如何显示最新版本？

【问题讨论】：

这不是在 React 上传递数据的正确方式。请参考React useContext hook。您需要使用上下文状态，以便您可以通过所有应用程序访问 letterVec。

【参考方案1】：

This isn't the right way to get values.
Try Passing letterVec as prop to TextComponent 
Like <TextComponent letterVec=this.state.letterVec/>

and then use it like this
const TextComponent = (props) => 
return (
     <View>
       <Text>Text Component, props.letterVec</Text>
     </View>);