版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_30101879/article/details/78527589
学习参考资料;菜鸟教程;
react入门教程实例-阮一峰;
一.无状态组件:没有生命周期,没有数据传递,只是用于view层显示;
import React,{Component} from "react"; // 引入react库文件
// 创建组件
export default ()=>{
return(
<div>
我是无状态组件!
</div>
)
}
上面只是创建组件,如何引入组件是非常简单的,想要知道,可以在上一节(react数据传递那块)去了解这个组件的完整的创建过程;
ReactDOM.render 是 React 的最基本方法,用于将模板转为 HTML 语言,并插入指定的 DOM 节点;
引用于:http://www.ruanyifeng.com/blog/2015/03/react.html;(react入门教程实列)
正因为这个,我们组件的内外部的引入;
class Index extends Component{//创建内部组件
render(){
return(
<div>
<Nostate></Nostate>{//外部组件引入;
}
</div>
)
}
}
ReactDOM.render(<div>
我是谁的人!
<Index />{
//内部组件引入;
}
</div>,document.getElementById("root"))
组件的引包省略;
react不存在双向数据绑定:可以模拟双向数据绑定;通过event.target方法去改变;
this.state={
txt:""
}
render(){
return(
<div>
<input type="text" onChange={this.chang.bind(this)} />
{this.state.txt}
</div>
)
}
chang(event){
this.setState({txt:event.target.value})
}
接下来要讲一下,关于propTypes的这个东西;
引入:
cnpm install prop-types --save
import PropTypes from 'prop-types'
就是类型检测,检查代码bug
import PropTypes from 'prop-types';
MyComponent.propTypes = {
// You can declare that a prop is a specific JS primitive. By default, these
// are all optional.
optionalArray: PropTypes.array,
optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func,
optionalNumber: PropTypes.number,
optionalObject: PropTypes.object,
optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol,
// Anything that can be rendered: numbers, strings, elements or an array
// (or fragment) containing these types.
optionalNode: PropTypes.node,
// A React element.
optionalElement: PropTypes.element,
// You can also declare that a prop is an instance of a class. This uses
// JS's instanceof operator.
optionalMessage: PropTypes.instanceOf(Message),
// You can ensure that your prop is limited to specific values by treating
// it as an enum.
optionalEnum: PropTypes.oneOf(['News', 'Photos']),
// An object that could be one of many types
optionalUnion: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
PropTypes.instanceOf(Message)
]),
// An array of a certain type
optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
// An object with property values of a certain type
optionalObjectOf: PropTypes.objectOf(PropTypes.number),
// An object taking on a particular shape
optionalObjectWithShape: PropTypes.shape({
color: PropTypes.string,
fontSize: PropTypes.number
}),
// You can chain any of the above with `isRequired` to make sure a warning
// is shown if the prop isn't provided.
requiredFunc: PropTypes.func.isRequired,
// A value of any data type
requiredAny: PropTypes.any.isRequired,
// You can also specify a custom validator. It should return an Error
// object if the validation fails. Don't `console.warn` or throw, as this
// won't work inside `oneOfType`.
customProp: function(props, propName, componentName) {
if (!/matchme/.test(props[propName])) {
return new Error(
'Invalid prop `' + propName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
},
// You can also supply a custom validator to `arrayOf` and `objectOf`.
// It should return an Error object if the validation fails. The validator
// will be called for each key in the array or object. The first two
// arguments of the validator are the array or object itself, and the
// current item's key.
customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
if (!/matchme/.test(propValue[key])) {
return new Error(
'Invalid prop `' + propFullName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
})
};
其他API之classnames:
这个API是通过给组件和组件内部进行定义类名;如何进行定义呢,接下来我为大家介绍一下,废话不多说啦,先要安装classnames
npm install --save-dev classnames
classnames就像封装好的一个模块进行将类名进行引入,非常方便好用,当然内部也可以自定义类名,不会对其进行修改,只会往后叠加而已,在需要的组件内部进行引包;
import ClassNames from 'classnames'
然后进行自定义:
const classes = ClassNames('love job who',props.className)
<div className={classes}/>
这样就完成了内部定义classnames值啦。