React Native引入自定义Card组件后无法显示数据求助

嘿，我看到你的问题了——这是一个很常见的拼写小失误，很容易中招！问题出在你的Card.js组件里，你把React用于传递子元素的props属性名写错了：

错误根源：拼写错误 #

在Card组件的返回值里，你写的是{props.childern}，但正确的属性名应该是**props.children**（注意最后是children，不是childern）。React会自动把组件标签包裹的内容放到props.children里，拼写错误的话，React找不到对应的子元素，自然就只渲染Card的样式容器，不显示数据了。

修正后的Card.js代码 #

import React from 'react';
import { View } from 'react-native';
const Card = (props) => {
  return (
    <View style={styles.containerStyle}>
      {props.children} {/* 这里修正了拼写 */}
    </View>
  );
};
const styles = {
  containerStyle: {
    borderWidth: 1, borderRadius: 2, borderColor: '#ddd', borderBottomWidth: 0,
    shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1,
    shadowRadius: 2, elevation: 1, marginLeft: 5, marginRight: 5, marginTop: 10
  }
};
export default Card;

在AlbumDetail中正确使用Card组件 #

接下来修改AlbumDetail.js，用<Card>标签包裹你的内容，这样就能同时渲染样式和数据了：

import React from 'react';
import { Text } from 'react-native';
import Card from './Card';
const AlbumDetail = (props) => {
  return (
    <Card> {/* 用Card替换原来的View */}
      <Text>{props.albumList.title}</Text>
    </Card>
  );
};
export default AlbumDetail;

这样修改后，Card的样式会正常应用，同时props.albumList.title的数据也能正确显示出来啦！

内容的提问来源于stack exchange，提问作者Pratik Khadka