React Native一个组件只被渲染一次

Question

我使用了两个图书馆 从'react-native-swipe-cards'导入SwipeCards; 和 从'react-native-auto-typing-text'中导入AutoTypingText;

在每张卡片我有我使用AutoTypingText，问题是，它使用相同的文字，所有的人，这确实改变了唯一的事情就是this.props.Nickname

哪个不是的一部分对于AutoTypingText

儿童卡构件文字道具：

render() { 
    return (
     <View style={styles.viewStyle}> 
      <Text style={styles.titleText}>{this.props.Nickname}</Text> 
      <AutoTypingText 
       text={"\nAge: " + this.props.Age + "\n" 
        + "City: " + this.props.City + "\n" 
        + "Recent Login: " + this.props.RecentActivity + "\n" 
        + "Points: " + this.props.Points + "\n" 
        + "About: \"" + this.props.About + "\"\n" 
       } 
       charMovingTime={0} 
       style={textStyle} 
       delay={0} 
       onComplete={() => { 
        console.log('done'); 
        console.log(this.state) 
       }} 
      /> 

      <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}> 
       <Button style={styles.buttonStyle} textStyle={styles.buttonText}> 
        Exploit ! 
       </Button> 
       <Button style={styles.buttonStyle} textStyle={styles.buttonText}> 
        Spare 
       </Button> 
      </View> 
     </View> 
    ); 
    } 
} 

父卡列表

const Cards = [ 
{ 
    Nickname: "S4nr0", 
    Age: 25, 
    City: "New-York", 
    RecentActivity: "17/07/2016 14:11PM", 
    About: "I <3 Kittenz", 
    Points: 1337 
}, 
{ 
    Nickname: "Sr00lik", 
    Age: 23, 
    City: "New-York", 
    RecentActivity: "17/07/2016 14:11PM", 
    About: "If Internet explorer is brave\nenough to ask you to be your\n default browser, you're brave \nenough to ask that girl out", 
    Points: 1337 
}, 
{ 
    Nickname: "Bomba", 
    Age: 24, 
    City: "New-York", 
    RecentActivity: "17/07/2016 14:11PM", 
    About: "I'm Awesome !", 
    Points: 1337 
} 
]; 

export default React.createClass({ 
    getInitialState() { 
    return { 
     cards: Cards 
    } 
    }, 
render() { 
    return (
     <SwipeCards 
     cards={this.state.cards} 
     renderCard={(cardData) => <Card {...cardData} />} 
     /> 
    ) 
    } 
}) 

澄清：这是因为如果AutoTypingText就像一个单身（我知道这是不是）， 因为它的结果是相同的在所有的卡

Answer 1

这不是正确的答案，但在反应本土通常有助于为重复的元素提供关键属性，以确保“虚拟DOM”检测到更改。

所以，你可以这样做：

<AutoTypingText 
      key={this.props. Nickname} 
      text={"\nAge: " + this.props.Age + "\n" 
       + "City: " + this.props.City + "\n" 
       + "Recent Login: " + this.props.RecentActivity + "\n" 
       + "Points: " + this.props.Points + "\n" 
       + "About: \"" + this.props.About + "\"\n" 
      } 
      ... 

试试看; ）