如何将文本传递到React Native中的组件中?(安卓系统)

Question

我正在调用以下函数

const LevelCard = (level) => {
const currLevel = level;
console.log(currLevel)
return (
<View style={{
flex: 1,
width: 400,
alignItems: 'center', 
justifyContent: 'center'
}}>
<CategoryButton
title='Text should go here'
onPress={() => navigation.navigate('')}
/>
</View>
);
}

来自另一个组件

function CallFunction() {
return (
<SafeAreaView style={styles.categories}>
<ScrollView horizontal={true} style={styles.scrollView}>
<View>
<LevelCard 
level="This is the text I want to pass"
/>
</View>
</ScrollView>
</SafeAreaView>
);
}

但我不知道如何真正从"级别"获得文本，以显示在react本地组件中的任何位置。但是，console.log语句在它之外可以正常工作。

感谢

Answer 1

我建议你看看react中的道具，用一种通用的方式来解释它，你可以想到这样的道具："道具之于组件，正如参数之于函数"；。现在你正在正确地将文本传递到LevelCard组件，但你没有正确地检索它，道具是作为对象传递的，所以你必须从接收组件中销毁它：

const LevelCard = ({ level }) => { // <--- Notice this line
const currLevel = level;
console.log(currLevel)
return (
<View style={{
flex: 1,
width: 400,
alignItems: 'center', 
justifyContent: 'center'
}}>
<CategoryButton
title={level} {/* then use it like this*/}
onPress={() => navigation.navigate('')}
/>
</View>
);
}