[react] react有几种构建组件的方式？可以写出来吗？

Posted 2021-12-20 前端小歌谣

[react] react有几种构建组件的方式？可以写出来吗？

1.无状态函数式组件
 

function HelloComponent(props, /* context */) 
return <div>Hello props.name</div>

ReactDOM.render(<HelloComponent name="Sebastian" />, mountNode)

2.React.createClass
 

var InputControlES5 = React.createClass(
propTypes: //定义传入props中的属性各种类型
initialValue: React.PropTypes.string
,
defaultProps:  //组件默认的props对象
initialValue: ''
,
// 设置 initial state
getInitialState: function() //组件相关的状态对象
return 
text: this.props.initialValue || 'placeholder'
;
,
handleChange: function(event) 
this.setState( //this represents react component instance
text: event.target.value
);
,
render: function() 
return (
<div>
Type something:
<input onChange=this.handleChange value=this.state.text />
</div>
);

);
InputControlES6.propTypes = 
initialValue: React.PropTypes.string
;
InputControlES6.defaultProps = 
initialValue: ''
;

3.React.Component
 

class InputControlES6 extends React.Component 
constructor(props) 
super(props);

// 设置 initial state
this.state = 
text: props.initialValue || 'placeholder'
;

// ES6 类中函数必须手动绑定
this.handleChange = this.handleChange.bind(this);


handleChange(event) 
this.setState(
text: event.target.value
);


render() 
return (
<div>
Type something:
<input onChange=this.handleChange
value=this.state.text />
</div>
);


InputControlES6.propTypes = 
initialValue: React.PropTypes.string
;
InputControlES6.defaultProps = 
initialValue: ''
;

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题