react组件基本用法示例小结
本文实例讲述了react组件基本用法。分享给大家供大家参考，具体如下：
组件间传值：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <div id="app"> </div> <script src="../js/react.production.min.js"></script><!--react核心库--> <script src="../js/react-dom.production.min.js"></script><!--操作DOM的react扩展库--> <script src="../js/babel.min.js"></script><!--解析JSX语法--> <script type="text/babel"> class Com extends React.Component { click = ()=>{ // console.log(this.input); // console.log(this.p.innerText); console.log(this.refs.my.value);//父组件访问子组件用refs }; render() { return ( <div> <input type="text" ref={(input)=>{this.input=input}}/> <p ref={(p)=>{this.p=p}}>我是段落</p> <input type="text" ref="my"/> <button onClick={this.click}>点击</button> </div> ); } } ReactDOM.render(<Com/>,document.getElementById('app')); </script> </body> </html>
列表：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div id="app"></div>
<script src="../js/react.production.min.js"></script><!--react核心库-->
<script src="../js/react-dom.production.min.js"></script><!--操作DOM的react扩展库-->
<script src="../js/babel.min.js"></script><!--解析JSX语法-->
<script type="text/babel">
class Add extends React.Component {
click = ()=>{
this.props.allAdd(this.input.value);
};
render() {
const {length} = this.props;
return (
<div>
<input type="text" ref={(input)=>{this.input=input}}/>
<button onClick={this.click}>add{length}</button>
</div>
)
}
}
class List extends React.Component {
render() {
const {list} = this.props;
return (
<div>
<ul>
{
list.map((v,i)=>{
return <li key={i}>{v}</li>
})
}
</ul>
</div>
)
}
}
class App extends React.Component {
state = {
list:['吃饭','睡觉','打游戏','游泳']
};
add = (value)=>{
const {list} = this.state;//获取原先的list
list.unshift(value);//将添加的值传入list
this.setState(list);//重新设置list
};
render() {
const {list} = this.state;//获取list
return (
<div>
<Add allAdd={this.add} length={list.length}/>
<List list={list} />
</div>
)
}
}
ReactDOM.render(<App />,document.getElementById('app'));
</script>
</body>
</html>
受控组件和非受控组件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div id="app"></div>
<script src="../js/react.production.min.js"></script><!--react核心库-->
<script src="../js/react-dom.production.min.js"></script><!--操作DOM的react扩展库-->
<script src="../js/babel.min.js"></script><!--解析JSX语法-->
<script type="text/babel">
class Com extends React.Component {
state = {
age:''
};
//非受控组件 不受state控制
click = () => {
console.log(this.input.value);
};
change = (event)=>{
console.log(event.target.value);
this.setState({
age: event.target.value
})
};
render() {
const {age} = this.props;
return (
<div>
姓名：<input type="text" ref={(input)=>{this.input=input}}/>
<button onClick={this.click}>获取姓名</button>
年龄：<input type="text" value={age} onChange={this.change}/>
</div>
);
};
}
ReactDOM.render(<Com />,document.getElementById('app'));
</script>
</body>
</html>
组件生命周期：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<div id="app"></div>
<script src="../js/react.production.min.js"></script><!--react核心库-->
<script src="../js/react-dom.production.min.js"></script><!--操作DOM的react扩展库-->
<script src="../js/babel.min.js"></script><!--解析JSX语法-->
<script type="text/babel">
class Com extends React.Component {
state = {
msg:123
};
sing() {
return new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve('唱一首歌');
},1000);
})
};
async get() {
await this.sing().then((res)=>{
console.log(res);
});
};
componentWillMount() {
//will会先执行，但不一定先执行完毕
console.log('之前');
// this.get();
}
componentDidMount() {
//进行ajax操作，获取后台数据
console.log('之后');
}
shouldComponentUpdate(nextProps, nextState) {
const {msg} = this.state;
//如果没有
if ({msg} !== nextState) {
return true;
}
console.log('更新');
return false;
}
componentWillUpdate() {
console.log('更新之前');
}
componentDidUpdate() {
console.log('更新之后');
//再次获取数据
}
click = ()=>{
this.setState({
msg: 234
})
};
render() {
console.log('render');
const {msg} = this.state;
return(
<div>
<h1>{msg}</h1>
<button onClick={this.click}>更新</button>
</div>
)
}
}
ReactDOM.render(<Com />,document.getElementById('app'));
</script>
</body>
</html>
希望本文所述对大家react程序设计有所帮助。
-
本文向大家介绍vue 动态组件用法示例小结，包括了vue 动态组件用法示例小结的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了vue 动态组件用法。分享给大家供大家参考，具体如下： 通过使用保留的 <component> 元素，动态地绑定到它的 is 特性，我们让多个组件可以使用同一个挂载点，并动态切换。根据 v-bind:is="组件名" 中的组件名去自动匹配组件，如果匹配不到则不显示。
-
本文向大家介绍react基本安装与测试示例，包括了react基本安装与测试示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了react基本安装与测试。分享给大家供大家参考，具体如下： 语法特点： 声明式编码：只在意结果不在意过程 组件化编码：html,css,js的集合 单向数据流：vue也是单向数据流，有一个双向绑定功能。 支持服务器端编写 高效：先生成一个虚拟DOM，然后在DOM中操
-
本文向大家介绍一个基于react的图片裁剪组件示例，包括了一个基于react的图片裁剪组件示例的使用技巧和注意事项，需要的朋友参考一下 开始 写了一年多vue，感觉碰到了点瓶颈，学习下react找找感觉。刚好最近使用vue写了个基于cropperJS的图片裁剪的组件，便花费了几个晚上的功夫用react再写一遍。代码地址 项目是使用create-react-app来开发的，省去了很多webpack配
-
本文向大家介绍ES6下React组件的写法示例代码，包括了ES6下React组件的写法示例代码的使用技巧和注意事项，需要的朋友参考一下 本文主要跟大家分享了ES6下React组件的写法示例，下面来一起看看详细的介绍： 一：定义React组件 二：声明prop类型与默认prop 三、设置初始state 四、自动绑定 总结 以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮
-
引用脚本的内容： /* “显示组件占用大小”与“在组件页面增加按钮”例子 by Ansifa 编译需要： NSIS建议最新版，ButtonEvent插件，还有修改过的UI.EXE（见附件） */ !AddPluginDir . XPStyle on OutFile "显示组件占用大小.EXE" Name "显示组件占用大小" !include "WordFunc.nsh" !include 'M
-
本文向大家介绍PHP抽象类基本用法示例，包括了PHP抽象类基本用法示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了PHP抽象类基本用法。分享给大家供大家参考，具体如下： 运行上述代码，会提示如下错误信息： Fatal error: Class Managers contains 1 abstract method and must therefore be declared abstr