Structure StoryMap

Exemple de state dans le composant parent

by Nicolas Lips

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

Babel + JSX

// App est le composant racine de l'application
// C'est un composant stateful
// Son state contient les données de l'application
// dont le champ 'storyMapData': le graphe des  activité, tâche, story et release
// Ce composant ne prend aucune propriété en entrée
class App extends React.Component {
	constructor(props) {
  	super(props);
  	this.state = {
	  	storyMapData: {
      	activities: []
      }
  	};
 	}
  render() {
    return (
    	<div style={{border: '0.1em solid blue',margin:'1em'}}>
        <div>
          <h1>App</h1>
          <div>
            <p>this.state:</p>
            <pre>{JSON.stringify(this.state, null, 2)}</pre>
            <p>this.props:</p>
            <pre>{JSON.stringify(this.props, null, 2)}</pre>
          </div>
        </div>
        <StoryMap data={this.state.storyMapData} />
      </div>
    );
  }
}

// StoryMap est le composant d'affichage d'une StoryMap
// C'est un composant stateful
// Son state contient le niveau de zomm
// Il attend la propriété 'data' : la grappe de données
class StoryMap extends React.Component {
	constructor(props) {
  	super(props);
  	this.state = {
     	zoomLevel: 1
  	};
    this.changeZoomLevel = this.changeZoomLevel.bind(this);    
 	}
  changeZoomLevel(newZoomLevel) {
  	this.setState({
    	zoomLevel: newZoomLevel
    });
  }
  render() {
    return (
    	<div style={{border: '0.1em solid green',margin:'1em'}}>
        <div>
          <h2>StoryMap</h2>
          <div>
            <p>this.state:</p>
            <pre>{JSON.stringify(this.state, null, 2)}</pre>
            <p>this.props:</p>
            <pre>{JSON.stringify(this.props, null, 2)}</pre>
          </div>
          <div>
            <StoryMapHeader
              zoomLevel={this.state.zoomLevel}
              changeZoomLevel={this.changeZoomLevel} />
            <StoryMapGrid
              data={this.props.data}
              zoomLevel={this.state.zoomLevel} />
          </div>
        </div>
      </div>
    );
  }
}

//...