Question

我试图在同一页面上显示几个自定义组件，但是这些组件显示的内容相同。

import React from 'react';
import { StyleSheet, Image, View, ActivityIndicator, Text } from 'react-native';
import { AppLoading, Font } from 'expo';

export default class UiCard extends React.Component {
  state = { fontsLoaded: false };

  constructor(props){
    super(props);

    image = props.image;
    mainText = props.mText;
    bottomText = props.bText;
  }



  render() {
    if( !this.state.fontsLoaded ) {
      return <AppLoading/>
    }



    return (
      <View    style={styles.rowItem}>
        <View  style={styles.rowItemInner}>
          <View  style={styles.rowItemImage}>
            <Image
              source={{ uri: image }}
              style={{  height: 150 }}
              PlaceholderContent={<ActivityIndicator />}
            />
            <View  style={styles.rowItemStars}>

            </View>
          </View>

          <View style={styles.rowItemContent}>
            <Text  style={styles.rowItemContentText}> {mainText} </Text>  
          </View>

          <View  style={styles.rowItemFooter}>
            <Text  style={styles.rowItemFooterText}> {bottomText} </Text>
          </View>
        </View>
      </View>
    );
  }
}

在通话页面上

var CardsArray = [
  {id: 0, image: "", stars: 3, stext: "get 83$ back", text: "This is text card special"},
  {id: 1, image: "", stars: 5, stext: "get 22$ back", text: "This is text card ui special"},
];

var CardList = CardsArray.map( (item, index) => {
        return (
          <UiCard key={item.id} uid={item.id}  stars={item.stars} image={item.image} mText={item.text}  bText={item.stext} ></UiCard>
        );
    });

但是，尽管将不同的内容传输到组件，但显示的组件显示的内容相同。有任何想法吗？请帮助我）

Answer 1

您以错误的方式返回了UiCard，这是JSX，而不是HTML。它应该看起来像<UiCard ...all the props />，而不是<UiCard ...props ></UiCard>。

Answer 2

不要在构造函数中为此烦恼：

image = props.image;
mainText = props.mText;
bottomText = props.bText;

只需在标记中直接使用道具即可

return (
  <View    style={styles.rowItem}>
    <View  style={styles.rowItemInner}>
      <View  style={styles.rowItemImage}>
        <Image
          source={{ uri: this.props.image }}
          style={{  height: 150 }}
          PlaceholderContent={<ActivityIndicator />}
        />
        <View  style={styles.rowItemStars}>

        </View>
      </View>

      <View style={styles.rowItemContent}>
        <Text  style={styles.rowItemContentText}> {this.props.mText} </Text>  
      </View>

      <View  style={styles.rowItemFooter}>
        <Text  style={styles.rowItemFooterText}> {this.props.bText} </Text>
      </View>
    </View>
  </View>
);

在页面上响应本机几个相同的自定义组件

2 个答案: