反應 - 組件樣式不從道具更新

我目前有一個問題，即我的組件之一（ComponentThree）樣式未被更新，即使發送的道具和生成的樣式實際上正確更新。反應 - 組件樣式不從道具更新

我正在使用父母 - 孩子通信技術，我暴露了我的第二個組件可以觸發的道具功能。然後，我的第三個組件會跑出作爲道具傳遞給它的父項的狀態。

下面是我的代碼（藉口次要編碼的問題，因爲我已經有撕裂了這一點，概括）：

class ComponentOne extends React.Component { 

    constructor(){ 
    super(); 
    this.state = { 
     swipePosition: 0, 
    }; 
    } 

    handleSwipe(val, animate = false) { 
    this.setState({ 
     swipePosition: val, 
    }); 
    } 

    render() { 
    return <div className="componentOne"> 

     <ComponentTwo onSwipe={this.handleSwipe.bind(this)} />; 

     <ComponentThree swipePosition={this.state.swipePosition} /> 

    </div>; 
    } 
} 

class ComponentTwo extends React.Component { 

    handlePanEnd() { 
    this.props.onSwipe(percentage); 
    } 

    render() { 
    return <Hammer onPanEnd={this.handlePanEnd.bind(this)}> 
     <li>some content goes here...</li> 
    </Hammer>; 
    } 
} 

class ComponentThree extends React.Component { 

    constructor(){ 
    super(); 
    this.state = { 
     styles: { 
     rejected: {}, 
     accepted: {}, 
     }, 
    }; 
    } 

    getStyles(swipePosition) { 

    // do bunch of stuff i.e. for rejected: 
    const rejected = { 
     WebkitTransform: 'translate3d(-100%, 0, 0)' 
    } 

    this.setState({ 
     styles: { 
     rejected, 
     accepted, 
     }, 
    }); 
    } 

    componentWillReceiveProps(nextProps) { 
    this.getStyles(this.props.swipePosition); 
    } 

    componentDidMount() { 
    this.getStyles(this.props.swipePosition); 
    } 

    render() { 

    return <div className='ComponentThree'> 
     <div style={this.state.styles.rejected}></div> 
     <div style={this.state.styles.accepted}></div> 
    </div>; 
    } 
}

任何建議表示歡迎。

來源

2016-03-02 sukh

在'componentWillReceiveProps'你是不是傳遞傳入'props'（'nextProps'），你傳遞舊的（'this.props'） – lux

仍然一無所獲:( 控制檯在第三註銷組件渲染，我可以看到更新的狀態樣式，即 'console.log（this.state.styles.rejected）;' – sukh

什麼是'swipePosition'應該做/包含？它沒有被用於任何類型的條件''getStyles（）'。這個函數總是會在安裝時和收到新的'props'時生成相同的狀態，'rejected'總是新創建的，'accepted'將一直是undefined – lux

這是到底真的簡單，完全是一個開發故障:)（可恥的尷尬）

在getStyles功能我在做計算的一堆 - 它應用到風格時，我忘記把%在所以React只是將其視爲無效的樣式而忽略了！

來源

2016-03-03 12:15:49 sukh

ComponentThree會更簡單，如果你只是在渲染中計算樣式，而不是將它們保存在狀態。目前，您正在使用卡紙進行簿記，以及何時添加新的道具，但最終的結果是您在調用render時需要的樣式。相反，只需在render中計算它們，並且大部分代碼都會消失。我懷疑你的bug在某個地方是一個愚蠢的錯誤，通過重構，你最終可能會刪除導致bug的代碼。

來源

2016-03-02 23:49:24

反應 - 組件樣式不從道具更新

回答

相關問題