javascript - 如何通过列表项将 React Prop 传递给类

Question

快速 React-Native 问题，如何将 Prop 从一个类通过 SpeciesListItem 传递到 SpeciesDetail 类？

我有一个 Species 类，它呈现一个物种列表，这些物种是它们自己的 SpeciesListItem 组件被传递用于渲染的 Prop ，但是当一个列表项被点击时，它需要使用 population 的 props 进入 SpeciesDetail 页面，但最后一点我该怎么做？

这就是我的工作:

物种

import React, {Component} from 'react';
import {ScrollView, StyleSheet, Switch, Text, TouchableHighlight, View} from 'react-native';

import SpeciesListItem from './SpeciesListItem';

import deerData from './deerDataJson';

export default class Species extends Component {
    constructor() {
        super();

        this.state = {
            deerData: deerData,
        }
    }

    render() {
        return (
            <ScrollView style={styles.pageContainer}>

                <TouchableHighlight onPress={() => this.props.navigation.navigate('SpeciesDetail')}
                                    style={styles.touchableHighlightButton}
                                    underlayColor={null}>
                    <SpeciesListItem deerData={this.state.deerData.fallowDeer}/>
                </TouchableHighlight>

            </ScrollView>
        );
    }
}

物种列表项

import React, {Component} from 'react';
import {Image, StyleSheet, Text, View} from 'react-native';

import colors from "../../Styles/colors";

export default class SpeciesListItem extends Component {

    deerData = this.props.deerData;

    render() {
        return (
            <View style={styles.pageContainer}>

                {/***** Deer image *****/}
                <View style={styles.deerImageContainer}>
                    <Image style={styles.image}
                           source={this.deerData.deerImage}
                           resizeMode="center"
                    />
                </View>

                {/***** List item text *****/}
                <View style={styles.textContainer}>
                    <Text style={styles.deerNameLatin}>{this.deerData.deerNameLatin}</Text>
                    <Text style={styles.deerName}>{this.deerData.deerName}</Text>
                    <Text style={styles.deerDescription} numberOfLines={3}>{this.deerData.ListItemDescription}</Text>
                </View>

                <Text style={styles.readMoreButton}>Read more</Text>

            </View>
        );
    }
}

物种详情

import React, {Component} from 'react';
import {ScrollView, StyleSheet, Text} from 'react-native';

export default class SpeciesDetail extends Component {
    render() {

        console.log('data: ', this.props.deerData);

        return (
            <ScrollView>

                <Text>{this.props.deerData.}</Text>

            </ScrollView>
        );
    }
}

为了清楚起见，我删除了一堆代码，因为有许多 SpeciesListItem 组件，我需要知道选择了哪个组件来呈现相关数据，请问如何我将 props 传递到 SpeciesDetail 页面？

谢谢，非常感谢您的帮助:)

Answer 1

假设 Species 和 SpeciesDetail 已在导航堆栈中注册

您需要先将您的 SpeciesListItem 渲染方法包装到一个 Touchable 对象中，以便访问触摸事件。

物种列表项

render() {
  <TouchableOpacity onPress={this.props.onPress}>
    //... Other stuff
  </TouchableOpacity>
}

物种

<SpeciesListItem onPress={() => this.props.navigation.navigate('SpeciesDetail', {deerData: this.state.deerData.fallowDeer})}
 deerData={this.state.deerData.fallowDeer}
/>

物种详情

render() {
    /* Get the param, provide a fallback value if not available */
    const { navigation } = this.props;
    const itemId = navigation.getParam('deerData', 'NO-ID');

Touchable 事件应该与您按下的组件相关，而不是父组件，因此从 Species 中移除 TouchableHighlight .