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

Question

我正在尝试将 ClassComponent 类中的 letterVec 传递给 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-nativeclasscomponentscommunicationreact-props

Answer 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>);
}