Jak używać funkcji strzałek wewnątrz React.createClass

Question

Chcę używać ES6 (ES2015) w jak największym stopniu dla mojego małego projektu. Teraz chcę używać funkcji strzałek w React.

// What I want 
let Text = React.createClass({ 
    componentDidMount:() => { 
     setInterval(this.updateCurrentTime, 1000); 
    } 
} 

// What I have 
let Paragraph = React.createClass({ 
    render:() => (<div className="MySuperTable"><Text name="Dodo" startDate={(new Date()).toString()} /></div>) 
}); 

let Text = React.createClass({ 
    getInitialState: function() { 
     return { 
      currentTime: (new Date()).toString() 
     } 
    }, 
    componentDidMount: function() { 
     setInterval(this.updateCurrentTime, 1000); 
    }, 
    updateCurrentTime: function() { 
     this.setState({ 
      currentTime: (new Date()).toString() 
     }); 
    }, 
    render: function() { 
     return (
      <div> 
       <span>Hello my name is {this.props.name}</span> 
       <span>And I was born on {this.props.startDate}</span> 
       <span>And I now it's {this.state.currentTime}</span> 
      </div> 
     ); 
    } 
}); 

ReactDOM.render(
    <Paragraph/>, 
    document.getElementById('container') 
); 

1. Co muszę zrobić, aby dostać tę pracę?
2. Jak rozumiem, this będzie obiektem przekazanym do samej createClass, czy to jest poprawne?
3. Jak powiązać go z instancją Text?

Z góry dziękuję.

Answer 1

Można zmienić swój kod z ES2015 jak ten

class Text extends React.Component { 
    constructor() { 
    super(); 
    this.state = { currentTime: (new Date()).toString() }; 
    } 

    componentDidMount() { 
    setInterval(() => this.updateCurrentTime(), 1000); 
    } 

    updateCurrentTime() { 
    this.setState({ 
     currentTime: (new Date()).toString() 
    }); 
    } 

    render() { 
    return <div> 
     <span>Hello my name is { this.props.name }</span> 
     <span>And i was born { this.props.startDate }</span> 
     <span>And i now it's { this.state.currentTime }</span> 
    </div> 
    } 
}; 

let Paragraph =() => { 
    return <div className="MySuperTable"> 
    <Text name="Dodo" startDate={ (new Date()).toString() } /> 
    </div> 
}; 

Example

React - Reusable Components

Answer 2

jak pan powiedział, chciał użyć ES6 jak najwięcej. Więc zamiast używać createClass, możesz użyć "React.Component", możesz znaleźć więcej informacji here.

A następnie do użycia, znak strzałki można użyć Babel, preset-2015.