附加的反应本地组件不重新渲染

我试图编写一个函数从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（），也会发生这种情况。总之，我希望能够同时执行这两个功能的行为，但是我只能删除卡并添加一张新的，正确渲染的卡，如果我单独按下两个按钮的话。

任何想法将不胜感激！

来源

2016-11-26 Brian McGough

在这里你使用的道具设置图像，但不设置风格。你也可以使用道具。你已经在构造函数中设置了样式。然后你想改变样式，但构造函数不会再被调用，但创建一个新的对象。您可以使用道具卡的情况下属性设置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

来源

2016-11-26 07:16:24

设置背景风格传递道具内联，而不是在卡的状态，它的工作，谢谢！ –

@BrianMcGough不客气 –

你甭去警告有关阵列丢失的钥匙？对每张卡使用唯一标识符（或者它是阵列中的索引作为最后的手段），并使用它为阵列中的每个项目设置key支柱。这样，当阵列中的卡发生变化时，反应可以重新渲染它，因为它是一张新卡。

let cardElementArray = this.state.cardArray.map(theCard => { 
    return (
    <Card key={theCard.id} card={theCard}></Card> 
); 
});

了解更多关于钥匙here的React文档。

来源

2016-11-26 07:32:26

附加的反应本地组件不重新渲染

回答

相关问题