React-JSX语法规则

 RorinL     2021年08月08日 星期日 14:41:42     JavaScript   React      React    

?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 或小程序打开


1条评论

    发表回复

    您的电子邮箱地址不会被公开。

    CAPTCHAis initialing...