附加的反应本地组件不重新渲染
我试图编写一个函数从DOM上点击删除一个React Native组件(名为“Card”),然后在不同属性中添加一个新的“Card” 。例如,两张卡片都有背景颜色。如果第一张卡片是绿色的,则应该有蓝色背景的第二张卡片将继承原始卡片的绿色背景。附加的反应本地组件不重新渲染
的卡接收其背景颜色为道具过去了,就像这样:
class Card extends Component {
constructor(props) {
super(props);
this.state = {
style: {
backgroundColor: this.props.card.backgroundColor
}
};
}
render() {
return (
<TouchableHighlight style={this.state.style}>
<Image source={this.props.card.img} />
</TouchableHighlight>
)
}
}
主要成分是这样的:
class SetProject extends Component {
constructor(props) {
super(props);
this.state = {
cardArray: [{backgroundColor: 'green', img: require('~/SetProject/cardImages/ovals/1-red-empty-oval.png')}]
}
}
removeCard(){
let emptyArray = [];
this.setState({cardArray: emptyArray});
}
changeCard(){
// let emptyArray = [];
// this.setState({cardArray: emptyArray});
let newCardArray = [{backgroundColor: 'red', img: require('~/SetProject/cardImages/ovals/1-purple-shaded-oval.png')}]
this.setState({cardArray: newCardArray});
}
render() {
let cardElementArray = this.state.cardArray.map(theCard => {
return (
<Card card={theCard}></Card>
);
});
return (
<View>
<View>
{cardElementArray}
</View>
<TouchableHighlight>
<Text onPress={this.removeCard.bind(this)}>Remove Card</Text>
</TouchableHighlight>
<TouchableHighlight>
<Text onPress={this.changeCard.bind(this)}>Change Background</Text>
</TouchableHighlight>
</View>
);
}
}
所以我有两个按钮:removeCard,其中工程很棒,换卡。如果我按“删除卡”然后按“更改卡”,我看到我正在寻找的确切结果。该卡被移除并被新的替换。但是,如果我在changeCard这些线路点评:不按
// let emptyArray = [];
// this.setState({cardArray: emptyArray});
,然后按“更改卡”“删除卡”的新卡有一个新的形象,但它会保持以前的卡的背景颜色。如果我从changeCard调用this.removeCard(),也会发生这种情况。总之,我希望能够同时执行这两个功能的行为,但是我只能删除卡并添加一张新的,正确渲染的卡,如果我单独按下两个按钮的话。
任何想法将不胜感激!
在这里你使用的道具设置图像,但不设置风格。你也可以使用道具。你已经在构造函数中设置了样式。然后你想改变样式,但构造函数不会再被调用,但创建一个新的对象。 您可以使用道具卡的情况下属性设置STYL以及
render() {
return (
<TouchableHighlight style={this.props.card.style}>
<Image source={this.props.card.img} />
</TouchableHighlight>
)
}
为了更好地实施变得更加复杂了id属性添加到卡上。您可以通过这种方式使用componentWillReceiveprops,也可以忽略不必要的渲染。
[{ID: '1',的backgroundColor: '红色',IMG: 要求( '〜/ SetProject/cardImages /椭圆形/ 1-紫色阴影-oval.png')}]
class Card extends Component {
constructor(props) {
super(props);
this.state = {
style: {
card: this.props.card
}
};
}
componentWillReceiveProps(nextProps){
if(nextProps.card.id != this.state.card.id)
{
setState({card:nextProps.card})
}
}
render() {
return (
<TouchableHighlight style={this.state.style}>
<Image source={this.props.card.img} />
</TouchableHighlight>
)
}
}
https://facebook.github.io/react/docs/react-component.html#componentwillreceiveprops
你甭去警告有关阵列丢失的钥匙?对每张卡使用唯一标识符(或者它是阵列中的索引作为最后的手段),并使用它为阵列中的每个项目设置key
支柱。这样,当阵列中的卡发生变化时,反应可以重新渲染它,因为它是一张新卡。
let cardElementArray = this.state.cardArray.map(theCard => {
return (
<Card key={theCard.id} card={theCard}></Card>
);
});
了解更多关于钥匙here的React文档。
设置背景风格传递道具内联,而不是在卡的状态,它的工作,谢谢! –
@BrianMcGough不客气 –