import React from 'react';
export default class Text extends React.Component{
// 构造函数
constructor(props){
super(props);
this.style = {
background:'#f00',color:'#fff'};
this.arr = [
{
"name":"zhang","age":34},
{
"name":"li","age":35},
{
"name":"wang","age":14},
{
"name":"zhao","age":24}
];
this.state = {
num:0,
b:'2hdlfghsoahf'
}
}
a=1;
addList(){
// 通过循环生成dom
return this.arr.map((v,i)=>{
return (
// ref 获取真实dom，需要render之后才能获取到
'li'+i} onClick={
this.handle.bind(this,i)} key={
i}>
{
v.name}
{
v.age}
)
})
}
handle(e){
}
change(){
this.setState({
num:9
})
}
// 渲染
render(){
return(
'box'} style={
{
zIndex:9999999,...this.style,position:'absolute',left:this.props.left||0,top:this.props.top||'0px',fontSize:'40px',width:'100px',height:'100px'}}>
{
/*事件名称小驼峰*/}
this.change.bind(this)}>{
this.state.num}
{
this.addList()
}
{
position:'absolute',zIndex:999999999999999}} type="text" ref={
'input'}/>
)
}
tarnsform(){
this.props.onSubmit(this.refs.input.value);
}
componentWillMount(){
// 组件初始化时候执行
// 组件即将加载
}
componentDidMount(){
// ajax
// 组件初始化时候执行
// 组件加载完成
console.log(this.refs.box);
}
componentWillUpdate(){
// 二次渲染时候执行
// 组件即将更新
}
componentDidUpdate(){
// 二次渲染时候执行
// 组件更新完成
}
componentWillUnmount(){
// 组件即将卸载
// 清掉定时器等 内存释放
}
}
//------------------------------------------------------------------
//
{
/**/} react父子组件传值示例「建议收藏」
react父子组件传值示例「建议收藏」import React from react export default class Text extends React Component 构造函数 constructor props super props this style background f00 color fff this arr
vimrc 简洁配置
上一篇
2025-01-30 07:11
2025年（五）通俗易懂理解——双向LSTM
下一篇
2025-03-13 07:40
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/hz/124512.html