1回答

• 

  慕九州0567575

  2019-07-17 15:07:39

  首先创建一个新的React项目

  npx create-react-app my-app

  在src文件夹下单独建立一个js文件，把每一个组件封装成一个类，

  将需要在其他文件引用的类用

  export default    类名;

  命名导出，进行引用就可以了。

  //stateTest.js
  import React, { Component } from 'react';
  class LightningCounter extends Component {
      constructor(){
          super();
          this.state = {strikes:0};
      }
      getInitialState(){
          return {strikes:0}
      }
      timerTick=()=>{this.setState({strikes:this.state.strikes + 100});}
      componentDidMount=()=>{//组件被浏览器加载之后，没有被调用之前，设置定时器
          setInterval(this.timerTick,1000);}
      render() {
          var counterStyle = {color:"#66FFFF",fontSize:50}
          var count = this.state.strikes.toLocaleString();
          return (<div><h1 style={counterStyle}>{count}</h1></div>)}
    }
    class LightningCounterDisplay extends Component {
        render() {
            var commonStyle = {margin:0,padding:0}
            var divStyle = {width:250,textAlign:"center",backgroundColor:"black",padding:40,color:"#999",fontFamily:"sans-serif",borderRadius:10}
            var textStyle = {emphasis:{fontSize:38,...commonStyle},smallEmpasis:{...commonStyle},small:{fontSize:17,opacity:0.5,...commonStyle}}
            return (
            <div>
                <div style={divStyle}>
                <LightningCounter/>
                <h2 style={textStyle.smallEmpasis}>变更</h2>
                <h2 style={textStyle.smallEmpasis}>地球</h2>
                <p style={textStyle.smallEmpasis}>(加载后)</p>
            </div>
            </div>);}}
    export default LightningCounterDisplay;
    
    
    //index.js
    
    import React,{Component} from 'react';
    import ReactDOM from 'react-dom';
    import * as serviceWorker from './serviceWorker';
    import LightningCounterDisplay from './stateTs';
    ReactDOM.render(
        <div><LightningCounterDisplay /></div>, 
        document.getElementById('root'));
    serviceWorker.unregister();

  

  0 0