如何解决在 React Native 中渲染数据
我有一个名为 data
的对象,其中包含有关 book
的信息。我想做的最简单的事情就是渲染书名。我正在尝试如下。不工作。
const data = {
"book": {
"id": "2d320","name": "book 1","Chapters": [
{
"No": "1","date": "2010-04-22","plots": [
{
"name": "Hero"
}
]
},{
"No": "2","plots": [
{
"name": "Heroine"
}
]
},]}}
export class Books {
render() {
return (
<View>
<div>{data.book.name}</div>
</View>
);
}
}
解决方法
div 不应该在 react-native 中使用,导入后替换为 Text 即可。其次,基于类的组件应该像这样扩展 React.Component
import React,{ Component } from 'react';
import { Text,View } from 'react-native';
const data = {
book: {
id: '2d320',name: 'book 1',Chapters: [
{
No: '1',date: '2010-04-22',plots: [
{
name: 'Hero',},],{
No: '2',plots: [
{
name: 'Heroine',};
class Book extends Component {
render() {
return <View>
<Text>{data.book.name}</Text>
</View>;
}
}
export default Book;
这是一个 snack 显示您想要的输出。
如果你不想从 'react' 中导入组件,而想直接导出,那么也可以使用这种语法
export default class Book extends React.Component {
render() {
return (
<View>
<Text>{data.book.name}</Text>
</View>
);
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。