Question

我同时使用这两个图书馆从＆＃39; react-native-swipe-cards＆＃39;中导入SwipeCards; 和从＆＃39; react-native-auto-typing-text＆＃39;中导入AutoTypingText;

在我使用AutoTypingText的每张卡片中，问题是它在所有卡片中使用相同的文字，唯一改变的是this.props.Nickname

这不是AutoTypingText

的文字道具的一部分

儿童卡组件：

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} />}
      />
    )
    }
})

父卡列表

{{1}}

澄清一下：好像AutoTypingText就像一个单身人士（我知道它不是），因为它的结果在所有卡片中都是相同的

Answer 1

这不是正确的答案，但在本机反应中，通常有助于为重复的元素提供关键属性，以确保＆＃34;虚拟DOM＆＃34;检测变化。

所以你可以这样做：

<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"
            }
            ...

试一试; ）

React Native只渲染一次的组件

1 个答案: