I want to use ES6 (ES2015) as much as possible for my small project. Now I want to use arrow functions with 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')
);
this
will be the object passed into createClass
itself, is this correct? Text
instance? Thanks in advance.
You can change your code with ES2015
like this
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>
};
As you said, you wanted use ES6 as much as possible. So then instead of using createClass, you can use 'React.Component', you can find more info here .
And then to use, arrow mark you can use Babel, preset-2015.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.