學習參考資料;菜鳥教程;
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值啦。