ReactJS Übergang für Fortschrittsbalken funktioniert nicht

Question

Ich tauche gerade in ReactJS, also bin ich ein ziemlich Neuling in dieser Reactjs Welt. Ich habe die FB-Dokumentationen und einige Tutorials im Internet gelesen und mein Testprojekt gestartet.

In meinem Testprojekt versuche ich, eine Fortschrittsanzeige für Benutzer einzufügen, um deren Fortschritt beim Ausfüllen einiger Formulare auf 3 Seiten zu sehen. Dieser Teil funktioniert gut, bis ich der Prozessleiste etwas Übergangsmagie hinzufügen wollte.

Ich habe den Code unten geschrieben und ich dachte, es wäre der richtige Weg, um mein Ziel zu archivieren, indem ich eine Requisite vom Elternteil auf diese Kind-Fortschrittsbalken-Komponente zur Bestimmung des Prozentsatzes des Fortschrittsbalkens schiebe.

In meinem Konstruktor habe ich die Standardbreite auf 0 gesetzt, um sie durch componentDidMount auf einen Prozentsatz zu aktualisieren, der vom Elternteil kommt. Ich habe es geschafft, den Stil zu erhalten und einzustellen, aber der Übergang funktioniert überhaupt nicht. Ich versuche, einen ausgefallenen Fortschrittsbalken zu archivieren, der von 0% Breite bis zur angegebenen Breite prozentual über die Requisiten verläuft.

Mein Code aussehen mag wie folgt:

ProgressBar-Komponente

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; 

Answer 1

Sie können nicht den verschachtelten Zustand direkt eingeben möchten, sollten Sie es wie

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

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

    this.setState({style}); 
} 

auch Sie tun, Sie müssen Ihren Status in der componentWillReceiveProps-Funktion aktualisieren, während Sie den Status basierend auf den Requisiten aktualisieren.

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

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

    this.setState({style}); 
} 

Answer 2

Um diesen Effekt zu Arbeit zu machen, ich habe die Lösung den Stil in eine Funktion und rufen über Anfrage Animationsrahmen über einzuwickeln fand heraus, war wie 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