javascript - 在 native react 中链接外部组件后不能有任何值(value)

Question

我只是在尝试使用 react-native 来构建移动应用程序，我对 react 和 react-native 都很陌生。所以我无法弄清楚我遇到的这个错误:

这是我为样式目的构建的 Card.js:

import React from 'react'; import { View } from 'react-native';

const Card = (props) => {   return (
    <View style={styles.containerStyle}>
      {props.childern}
    </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;

然后我将 Card 组件添加到 AlbumDetail.js 中以用于样式设计。

import React from 'react';
import { Text , View } from 'react-native';
import Card from './Card';


// Constant if class and function ins not used
const AlbumDetail = (props) => {
      return (
        <View>
          <Text>{props.albumList.title}</Text>
        </View>
      );
};
// export
export default AlbumDetail;

现在的问题是:

如果我添加

<Card></Cade>

它只会显示样式，而数据不可见

如果我保留

<View></View>

它将显示所有没有样式的数据。

Problem Screenshot

Answer 1

我发现您的代码中有拼写错误，请检查卡片组件 {props.children} 而不是 {props.childern}