import React,{ Component } from 'react'
class Home extends Component {
constructor(props) {
super(props);
this.state = {
data:"js是世界上最好的语言"
};
}
render() {
return (
<div style={{backgroundColor:"#0ff",fontSize:"20px",color:"#00f"}}>
{this.state.data}
</div>
)
}
}
export default Home
import React,{ Component } from 'react'
class Home extends Component {
render() {
let data="js是世界上最好的语言";
return (
<div style={{backgroundColor:"#0ff",fontSize:"20px",color:"#00f"}}>
{data}
</div>
)
}
}
export default Home
效果与上面一样。
web前端是通过事件去操作界面的，所以在开发的过程中会用到大量的事件，下面以点击事件为例。
import React,{ Component } from 'react'
class Home extends Component {
constructor(props) {
super(props);
this.state = {
data:"js是世界上最好的语言"
};
}
render() {
return (
<div style={{backgroundColor:"#0ff",fontSize:"20px",color:"#00f"}} onClick={()=>this.click()}>
{this.state.data}
</div>
)
}
click=()=>{
alert("点到了!!!");
};
}
export default Home
constructor(props) {
super(props);
this.state = {
data:"js是世界上最好的语言"
};
}
render() {
return (
<div style={{backgroundColor:"#0ff",fontSize:"20px",color:"#00f"}} onClick={()=>this.click(this.state.data)}>
{this.state.data}
</div>
)
}
click=(data)=>{
alert(data);
};
constructor(props) {
super(props);
this.state = {
data:"js是世界上最好的语言"
};
}
render() {
return (
<div style={{backgroundColor:"#0ff",fontSize:"20px",color:"#00f"}} onClick={()=>this.click(this.state.data)}>
{this.state.data}
</div>
)
}
click=(data)=>{
this.setState({
data:"你说的对！！！"
});
};
this.setState()作用是将state中的数据进行修改，同时刷新界面，修改this.state.中的对应变量的值。
到此这篇reactJS入门（react .js）的文章就介绍到这了,更多相关内容请继续浏览下面的相关 推荐文章，希望大家都能在编程的领域有一番成就！版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdreactjs/27395.html