接:https://www.cnblogs.com/chenxi188/p/11702799.html
用上节建好的my-app项目:
my-app/ README.md node_modules/ package.json .gitignore public/ favicon.ico index.html manifest.json src/ App.css App.js App.test.js index.css index.js logo.svg
一、绑定状态数据state
1.在src目录下新建一个componets,用来放【自己建立的组件】、【引入react写法1】:
在components文件夹下,新建一个组件:【home.js】输入如下内容:注:(2)建立state数据(3)绑定state数据
import React,{Component} from ‘react‘; //(0)【引入组件第一种写法】 class Homes extends Component{ //(0-1)对应第一种引入react引入方法类写法 //(1)接下来两行为固定写法 constructor(){ super(); //(2)以下几行为建立一个组件状态数据 this.state={ name:"Alice", age:20, sex:"女", userinfo:{username:‘sky‘} } } render(){ //(3)下面的this.state.xxx为把状态数据绑定到前端 return( <div> <h2>这里是Home.js组件</h2> <p>我的名字是:{this.state.name}</p> <p>我的年龄是:{this.state.age}</p> <p>我的性别是:{this.state.sex}</p> <p>我的用户名:{this.state.userinfo.username}</p> </div> ); } }; export default Homes;
创建组件注意事项:
0. 组件名Home首字母必须大写,否则不报错,但内容也不会显示出来
- (1)处为固定写法,最好写成:
constructor(props){ //用父子组件传值props
super(props);
} - (2)处this.state={},注意后面是“=”号不是其它
- (3)处,return内部 html标签最外层只能有一个div,不能有多个,否则报错
- (3)处,的html标签必须有封闭符号 /,如<br>错误,必须写成<br />
2.然后把【APP.js根组件】改成如下【引入react写法二】(A)(B):
import React from ‘react‘; //(A)引入react写法二 import logo from ‘./logo.svg‘; import ‘./App.css‘; //从components文件夹下引入写好的Home.js组件,.js可省略 import Homes from ‘./components/Home‘; class App extends React.Component { //(B)对应引入写法二类写法 //以下的<Homes />为把home时写好的组件引用过来 render (){ return( <div className="App"> <h1>这里是app.js根组件</h1> <Homes /> </div> );} } export default App;
3.运行:回到my-app项目里在cmd运行代码,启动项目查看效果
npm start
运行效果:
3.再做个新闻组件练练手
1.在components目录下新建News.js
import React,{Component} from ‘react‘; class News extends Component{ constructor(){ super(); } render(){ return( <div> <ul> <li>新闻列表。。。</li> <li>新闻列表。。。</li> <li>新闻列表。。。</li> </ul> </div> ); } } export default News;
2.回到App.js里加载News组件:
import React, { Component } from ‘react‘; import logo from ‘./logo.svg‘; //import ‘./App.css‘; //把css样式注释掉,解除所有文本居中问题 //从components文件夹下引入Home.js import Homes from ‘./components/Home‘; import News from ‘./components/News‘; //引入News组件 class App extends Component { render (){ //用<News/>把组件显到前端 return( <div className="App"> <h1>这里是app.js根组件</h1> <Homes /> <News /> </div> );} } export default App;
刷新:http://localhost:3000/
显示如下:
这里是app.js根组件
这里是Home.js组件
我的名字是:Alice
我的年龄是:20
我的性别是:女
我的用户名:sky
- 新闻列表。。。
- 新闻列表。。。
- 新闻列表。。。
二、绑定属性
1.首先把Home.js里内容改成:
import React,{Component} from ‘react‘; import ‘../index.css‘; //【1】引入css--在index.css里写一个样式 class Homes extends Component{ //下3行固定写法 constructor(props){ super(props); this.state={ //【2】red名源自index.css里的.red样式定义 red:‘red‘, hello:‘hello‘ } } render(){ //【3】className=class因为css的class和js的class冲突,所以css里class=className、另外还有一个for=htmlFor //h2之后的{this.state.xxx}为绑定属性,此处是绑定一个样式 //p里绑定的title,鼠标移上去将显示hello return( <div> <h2 className={this.state.red}>这里是Home.js组件</h2> <p title={this.state.hello}>hello!</p>
{
//此处htmlFor作用:点姓名会选中后面的输入框
}
<label htmlFor=‘name‘>姓名:</label><input id=‘name‘ />
{
//行内样式写法
}
<p style={{"color":"green"}}>此处行内样式写的</p>
</div> ); } }; export default Homes;
2.到App.js里引入Home组件即可刷新显示(第二行已经变红):
这里是app.js根组件
这里是Home.js组件
hello!
- 新闻列表。。。
- 新闻列表。。。
- 新闻列表。。。
原文地址:https://www.cnblogs.com/chenxi188/p/11782349.html
时间: 2024-10-13 09:01:40