Javascript 用另一个组件打开一个组件'；道具

我正在尝试制作一个简单的便笺应用程序。我在

touchablepacity

标签中列出注释，按一下，我想在另一个组件中打开单击的注释。这就是我遇到麻烦的地方。下面是一些代码，供您理解该结构。我尝试了以下方法，但无法将任何信息传递给其他组件

下面是我用来定义新注释或显示现有注释的newNote组件

import React from 'react';
import {ScrollView, View, StyleSheet,Text, TextInput, Button,
TouchableOpacity} from 'react-native';

const newNote = (props) => {

return (
    <View style={{alignItems: 'center'}} >
        <View style={styles.newNoteContainer}>
            <TextInput style={styles.txtTopic}
            placeholder = {'Topic'}
            value = {props.updatedNote}
            onChangeText= {props.onNewNoteHeaderChange}
            />
            <TextInput style={styles.txtNote}
            placeholder='Write your note here...' 
            onChangeText={props.onNewNoteSubChange} 
            multiline= {true}/>
        </View>
        <View style = {{
            height: 35,
            flexDirection: 'row',
            justifyContent:'space-evenly',
            alignItems: 'center',
            width:'100%',
        }}>
            <TouchableOpacity
            style={{borderRightWidth: 1,
                borderColor:'#bbb',
                flex:1,
            }}
            >
                <Button title = {'SAVE'} onPress = {props.saveNote}/>
            </TouchableOpacity>
            <TouchableOpacity
            style={{
                flex:1,
            }} >
                <Button title = 'CANCEL' onPress = {props.cancelNote}/>
            </TouchableOpacity>
        </View>
    </View>
)
}

const styles = StyleSheet.create({
    txtTopic:{
        fontFamily:'Cochin',
        fontSize: 28,
        fontWeight: 'bold',
        borderBottomWidth: 1,
        borderBottomColor: '#bbb',
        height: 50,    
    },
    txtNote:{
        fontFamily:'Cochin',
        fontSize:18,
        height:'100%',
    },
    newNoteContainer:{
        borderWidth: 1,
        borderColor: '#bbb',
        width: '100%',
        height: '88%'
    }
})

export default newNote;

所以这里我试图将openNote函数传递给grand child组件。首先，我将其传递给

notecainer

，然后在

notecainer

中，我将其传递给

NoteItem

这是记事本

const noteContainer = (props) => {
    noteList = props.noteList.map((note,i) =>(
        <NoteItem header={note.Header}
            explanation = {note.Explanation}
            date = {note.Date}
            key= {i}
            openNote = {props.openNote}
            />
    ))

    return (
        <ScrollView>
            {noteList ? noteList : 
            <Text>{'You don\'t have a note yet.'
            + '\n' + 'Click plus button to add one.'
                }
            </Text>}
        </ScrollView>
    )
}

constnotecontainer=（道具）=>{
noteList=props.noteList.map（（注意，i）=>(
))
返回(
{注释列表？注释列表：
{“你还没有带便条。”
+“\n”+”单击加号按钮添加一个。”
}
}
)
}

这是一个值得注意的项目

const noteItem = (props) => {
    let date = props.date.substring(0,10);
    let explanation = props.explanation.substring(0,45) + '...';

    return(
        <TouchableOpacity style = {styles.noteContainer}
            onPress = {props.openNote}
        >
            <View style={styles.noteIdentifier} />
            <View style={styles.notePreviewContainer} >
                <Text style ={styles.noteHeader} >{props.header}</Text>
                <Text style ={styles.notePreviewLine} >{explanation}</Text>
            </View>
            <Text style ={styles.notePreviewLine}>{date}</Text>
        </TouchableOpacity>
    )
}

const noteItem=（道具）=>{
设date=props.date.substring（0,10）；
让解释=props.explainion.substring（0,45）+'…'；
返回(
{props.header}
{解释}
{date}
)
}

OpenNote实际上正在工作，我可以打开newNote组件。但我需要检索单击的noteItem信息。至少是键或订单号，以便我可以从具有noteList数组的状态检索数据

---

我曾尝试使用

（e）

在

openNote

函数上获取数据，但我无法处理它<代码>e只是一个空对象。当我尝试e.key或e.date时，我没有定义。

我已经解决了下面这行的问题。它是noteContainer文件。创建noteItems时，我将note.id作为函数的参数。并将其用作事件

 noteList = props.noteList.map((note,i) =>(
        <NoteItem header={note.Header}
            explanation = {note.Explanation}
            date = {note.Date}
            key = {i}
            openNote = {() => props.openNote(note.id)}
            />

noteList=props.noteList.map（（注意，i）=>(
props.openNote（note.id）}
/>

 noteList = props.noteList.map((note,i) =>(
        <NoteItem header={note.Header}
            explanation = {note.Explanation}
            date = {note.Date}
            key = {i}
            openNote = {() => props.openNote(note.id)}
            />