标签：输入框 icon from ffffff tle 作用 turn image js组件
接：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
在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首字母必须大写，否则不报错，但内容也不会显示出来
constructor(props){ //用父子组件传值props
super(props);
}
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;
npm start
运行效果：
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/
显示如下：
我的名字是：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组件即可刷新显示（第二行已经变红）：
hello!
标签：输入框 icon from ffffff tle 作用 turn image js组件
原文地址：https://www.cnblogs.com/chenxi188/p/11782349.html
