ReactJS進度條不工作

過渡，我只是潛入ReactJS讓我相當一個新手在這個世界Reactjs。我已經在互聯網上閱讀了FB文檔和一些教程，並開始了我的測試項目。ReactJS進度條不工作

在我的測試項目，我想包括一個進度條讓用戶看到他們在3個頁面填寫了一些表格的進展。這部分工作都很棒，直到我想向流程欄添加一些轉換魔術。

我已經寫了下面的代碼，我認爲這將是通過推動從父道具這個孩子進度組件，用於確定進度條的百分比存檔我的目標的正確途徑。

在我的構造函數中我設置的默認寬度0通過componentDidMount更新它到來自父母的百分比。我已經設法接受並設定了風格，但過渡根本不起作用。我嘗試歸檔一個花式進度條，通過道具以百分比從0％寬度到給定寬度。

我的代碼看起來喜歡如下：

ProgressBar組件

import './style.scss'; 
import React from 'react'; 
import classnames from 'classnames'; 

class ProgressBar extends React.Component { 

    constructor(props) { 
    super(props); 
    this.state = { progressionStyle : { } } 
} 
componentDidMount() { 
    this.setState({ 
     progressionStyle : { 
      width : this.props.progression, 
      transition : 'all 1500ms ease' 
     }, 
     scene1 : (this.props.scene1 == 'active') ? 'active' : (this.props.scene1 == 'done') ? 'done' : '', 
     scene2 : (this.props.scene2 == 'active') ? 'active' : (this.props.scene2 == 'done')  ? 'done' : '', 
     scene3 : (this.props.scene3 == 'active') ? 'active' : (this.props.scene3 == 'done') ? 'done' : '', 
    }); 
} 
/** 
* 
* Render 
* @return {JSX} 
*/ 
render() { 
    return (
     <div className="progress-bar"> 
      <div className="progress-bar__inner"> 

       <div className="progress-bar__progress"> 
        <div className={classnames('progress-bar__progress-fill', this.props.active)} style={this.state.progressionStyle}></div> 
       </div> 

       <div id="scene1" className="progress-bar__element"> 
        <i className={classnames('progress-bar__icon', this.state.scene1)}></i> 
        <span className="progress-bar__label">Scene 1</span> 
       </div> 

       <div id="scene2" className="progress-bar__element"> 
        <i className={classnames('progress-bar__icon', this.state.scene2)}></i> 
        <span className="progress-bar__label">Scene 2</span> 
       </div> 

       <div id="scene3" className="progress-bar__element"> 
        <i className={classnames('progress-bar__icon', this.state.scene3)}></i> 
        <span className="progress-bar__label">Scene 3</span> 
       </div> 

      </div> 
      </div> 
     ); 
    } 
} 
export default ProgressBar;

來源

2017-05-08 directory

不能直接設置嵌套的狀態，你應該像

componentDidMount() { 
    var style = {...this.state.style} 

    style.width = this.props.progression 
    style.transition = 'all 500ms ease-in' 

    this.setState({style}); 
}

也正在這樣做，你需要在componentWillReceiveProps函數中更新您的狀態，因爲您正在根據道具更新狀態。

componentWillReceiveProps(nextProps) { 
    var style = {...this.state.style} 

    style.width = nextProps.progression 
    style.transition = 'all 500ms ease-in' 

    this.setState({style}); 
}

來源

2017-05-08 13:32:38

謝謝通過請求動畫幀調用對於你的回答，實際上設置一個嵌套狀態非常好，因爲它和你最後寫的一樣。你能解釋爲什麼不在文檔中定義的地方？此外，過渡似乎現在起作用，但方向不對。當我通過路由回去屏幕它的工作原理，但往上走前，過渡不工作（寬度作品） – directory

它的工作，因爲你設置包含transtition和寬度狀態的新對象，但更好的方法是做的我在上面做過，你可以看到不變性助手文檔https://facebook.github.io/react/docs/update.html。優爾是確保您使用的componentWillReceiveProps太 –

是的，正是嘗試你的代碼和過渡工作，但只是當我瀏覽回..：/ – directory

爲了使這種效果的工作，我已經找到了解決辦法是風格包裝成一個功能，並通過爲FOL

componentDidMount() { 
     requestAnimationFrame(()=> { 
      this.showProgress(); 
     }); 
    } 

    showProgress() { 
     var style = { }; 
     style.width = this.props.progression; 
     style.transition = 'all 1500ms ease-in'; 
     this.setState({style}); 
    }

https://stackoverflow.com/a/43779273/968898

來源

2017-05-08 20:09:08 directory

ReactJS進度條不工作

回答

相關問題