React-JSX语法规则
?1.JSX语法规则
let hello = (<span>
<a>Hello React!</a>
</span>)
ReactDOM.render(hello,document.getElementById("app"));a.使用变量
使用花括号,花括号中使用js变量
b.使用类/样式
类使用: className=”xxx”
内联样式: style={{color: “red’,marginRight: 15px}}里面其实可以理解是一个json对象,在jsx里面使用json变量就要{包住}
c.虚拟DOM只能有一个根节点
d.标签名如果大写开头,react就会解析成组件;小写解析成普通html标签
e.虚拟DOM中只能写表达式
表达式:对象.属性,这些能返回一个值的
语句:一般是流程语句,for,if,switch…
f?.遍历
1.数组
<body>
<div id="app"></div>
<script type="text/babel">
let msg = ["haha","laji","jiji"];
let hello = (
<div>
<h2>前端框架列表</h2>
<ul>
{
msg.map((val)=>{
return <li>{val}</li>
})
}
</ul>
</div>
)
ReactDOM.render(hello,document.getElementById("app"));
</script>
</body>必须要有唯一的key
2.组件的创建
a.函数式组件的创建和使用[适用简单组件]
函数式组件可以一般只可以接收props,标签属性可以传递给函数;
function Saying(props){
return (
<h1>he say {props.saysome}</h1>
)
}
ReactDOM.render(<Saying saysome="hello" />,document.get....);简单组件就是无状态
注意一定要开头大写
<body>
<div id="app"></div>
<script type="text/babel">
//创建函数式组件
function Demo(){
return <h1>i am hanshushizujian</h1>
}
//使用
ReactDOM.render(<Demo/>,document.getElementById("app"));
</script>
</body>b.类式组件的创建和使用[适用复杂组件]
类中的构造器能不写就不写,构造器一般是用来给事件函数绑定this,或者初始化state属性;在类的实例化中super是否传参(prop)的不同就是:传递了prop,那么在构造函数中就可以使用this.props.
复杂组件就是有状态state
<div id="app"></div>
<script type="text/babel">
class Mycom extends React.Component{
render(){
return <h1>i am 类式组件</h1>
}
}
ReactDOM.render(<Mycom/>,document.getElementById('app'));
</script>React解析发现<Mycom/>，于是寻找组件,并创建Mycom的实例对象;然后调用对象上的render方法,接着将虚拟DOM转换为真实DOM;
b1修改状态
必须使用setState()方法[React.Component]，修改状态,是合并的方式,不是覆盖
this.setState({ishot: !this.state.ishot});—
初始化状态可以直接作为类成员属性,
为了解决this的指向问题,以及避免在constructor中多次this.hotschange = this.hotschange.bind(this);这样绑定this，可以直接将方法作为类成员
demo = function(){
//this将会是undefine[应为里面使用了严格模式]
}
demo = ()=>{
//this将向上级查找,上级就是实例对象
}b2属性-props
class Mycom extends React.Component{
state={ishot: true}
constructor(ff){
super();
}
hotschange = ()=>{
this.setState({ishot: !this.state.ishot});
console.log(this)
}
render(){
return <h1 onClick={this.hotschange}>i am 类式组件{this.state.ishot?'炎热':'凉爽'}</h1>
}
}
//传递属性name,say
ReactDOM.render(<Mycom name="haha" say="hahaha"/>,document.getElementById('app'));
//也可以使用...可以一次性传多个
let alldata = {name:"lisa",age: 58}
ReactDOM.render(<Mycom {...alldata}/>,document.getElementById('app'));传递属性,在标签中写属性,或者使用…
1.限制属性
需要下载prop-type.js,下载地址:https://unpkg.com/prop-types@15.7.2/prop-types.js
PropTypes.string[.isRequired]
PropTypes.number[必须是一个数值]
PropTypes.func[必须是一个方法]
class Mycom extends React.Component{
//...
//添加验证规则/限制
static propTypes={
name: PropTypes.string.isRequired,
doing: PropTypes.func //指明必须是一个方法
}
//默认值处理
static defaultProps={
//name: '88' //即使上面是isRequired这里又给了默认值,但还是会报错而不会添加默认值
}
}传递方法
class Mycom extends React.Component{
//...
//添加验证规则/限制
propTypes={
name: PropTypes.string.isRequired,
doing: PropTypes.func //指明必须是一个方法
}
}
//定义一个方法
function dosome(){
console.log("doing");
}
//传递到prop
ReactDOM.render(<Mycom name="haha" say="hahaha" doing={dosome}/>,document.getElementById('app'));b3.refs-标签标识
refs在render里面的标签写,应该尽量避免使用ref
refs的用法示例
1.字符串形式ref[不推荐使用]
ref=”xxx”
样例需求: 获取输入框的值并且显示到p标签上,没有获取就将name作为p内容的初始值
class Mycom extends React.Component{
state = {
nameval: ''
}
hotschange = ()=>{
//修改state一定要用setState({})
this.setState({nameval: this.refs.inputa.value});
console.log(this.refs.inputa.value);
}
render(){
let nameval = this.state.nameval;
let {name} = this.props;
return (
<div>
<p>{nameval==''?name:nameval}</p>
<input ref="inputa" /><button onClick={this.hotschange}>点我取值</button>
</div>
)
}
}
function dosome(){
console.log("doing");
}
ReactDOM.render(<Mycom name="默认值a" doing={dosome}/>,document.getElementById('app'));2.回调形式的ref[又称内联ref]
回调形式的ref有两种方式,两方式唯一区别是内联ref每次更新[如改变state]都会被调用两次,而且第一次节点获取到是null
方式一:ref={ node => this.node = node}[居多]
以上个例子代码为基础修改
hotschange = ()=>{
//字符串形式的ref获取
//this.setState({nameval: this.refs.inputa.value});
//console.log(this.refs.inputa.value);
//回调形式的ref获取
this.setState({nameval: this.node.value});
console.log(this.node.value);
}
render(){
let nameval = this.state.nameval;
let {name} = this.props;
return (
<div>
<p>{nameval==''?name:nameval}</p>
<input ref={ node => this.node = node} /><button onClick={this.hotschange}>点我取值</button>
</div>
)
}方式二:写成类属性[方法]
class Mycom extends React.Component{
//...
getnode = (cnode)=>{
}
render(){
//...
<input ref={this.getnode} /><button onClick={this.hotschange}>点我取值</button>
}
}方式三:使用createRef()
class Mycom extends React.Component{
//...
curnode = React.createRef();
render(){
//...
<input ref={this.curnode} /><button onClick={this.hotschange}>点我取值</button>
}
}三种方式取值[input的value]
//字符串形式的ref获取
//this.setState({nameval: this.refs.inputa.value});
//console.log(this.refs.inputa.value);
//回调形式的ref获取
// this.setState({nameval: this.node.value});
// console.log(this.node.value);
//React.createRef()
//this.setState({nameval: this.getnode.current.value});c受控组件-非受控组件[form]
受控组件就是表单的值被存储在state状态中,表单提交时候能够从state中取得数据;非受控就是需要取得的值是用的时候再到标签上取[不维护到状态中]
受控组件例子
class Myform extends React.Component{
state = {
uname: ''
}
saveuname = (e)=>{
this.setState({uname: e.target.value})
}
fromsubit = (e)=>{
e.preventDefault();
let {uname} = this.state;
alert("用户名"+uname);
}
render(){
return (
<form action="/" onSubmit={this.fromsubit}>
<input type="text" onChange={this.saveuname}/><br />
<button>提交</button>
</form>
)
}
}
ReactDOM.render(<Myform />,document.getElementById("app"))非受控组件
class Myform extends React.Component{
sname = (cnode)=>{
this.uname = cnode.value
}
fromsubit = (e)=>{
e.preventDefault();
console.log(this.uname.value);
}
render(){
return (
<form action="/" onSubmit={this.fromsubit}>
<input type="text" ref={c=>this.uname=c} /><br />
<button>提交</button>
</form>
)
}
}
ReactDOM.render(<Myform />,document.getElementById("app"))我学习React的更新或者更详细的学习过程将会在石墨文档中记录,https://shimo.im/docs/h3y3rgY3xCP6CRcw/ 「React」，可复制链接后用石墨文档 App 或小程序打开
-
RorinL 作者 Yy 🙂
快捷登陆