关于reactjs：React Native一个组件仅渲染一次


React Native a component being only rendered once

我正在使用两个库
从'react-native-swipe-cards'导入SwipeCards；
和
从'react-native-auto-typing-text'文本中导入AutoTypingText;

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

这不是AutoTypingText

的文本道具的一部分

子卡组件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
render() {
    return (
        <View style={styles.viewStyle}>
            <Text style={styles.titleText}>{this.props.Nickname}</Text>
            <AutoTypingText
                text={"\
Age:" + this.props.Age +"\
"
                    +"City:" + this.props.City +"\
"
                    +"Recent Login:" + this.props.RecentActivity +"\
"
                    +"Points:" + this.props.Points +"\
"
                    +"About: "" + this.props.About +""\
"
                }
                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>
    );
    }
}

父母卡列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
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\
enough to ask you to be your\
 default browser, you're brave \
enough 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就像一个单例(我知道不是那样)，
因为在所有卡中它的结果都是相同的

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

因此您可以执行以下操作：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<AutoTypingText
            key={this.props. Nickname}
            text={"\
Age:" + this.props.Age +"\
"
                +"City:" + this.props.City +"\
"
                +"Recent Login:" + this.props.RecentActivity +"\
"
                +"Points:" + this.props.Points +"\
"
                +"About: "" + this.props.About +""\
"
            }
            ...

尝试一下； )

相关讨论