附加的反應本地組件不重新渲染

我試圖編寫一個函數從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

附加的反應本地組件不重新渲染

回答

相關問題