对于React 当中 jsx的理解

Posted 2021-03-02 大沙漠

React当中，我们使用JSX来指定React里的模板，可以把JSX理解为一个对象，React中可以在三个地方指定jsx，分别是ReactDOM.render()的参数、function组件的返回值和class组件内render函数的返回值，例如:

<div id="root"></div>                   
<script type="text/babel">
  function Show(){
    return <p>Show Function</p>               /*function 内返回一段jsx*/
  } 
  class App extends React.Component{ 
    render(){                                 /*class组件的render函数内返回一段jsx*/
      return  <div>
                <h1>App Class</h1>
                <Show></Show>
              </div>
    }
  } 
  ReactDOM.render(<div><App/></div>,root)     /*ReactDOM.render()的参数1可以是一段jsx*/
</script>

在写jsx代码的时候推荐用括号把它们给包裹起来，这样可以防止分号自动插入的bug(官网这样说的，具体也不知道是什么bug=.=)，

jsx经过babel编译后会转化为一个React.createElement()函数，例如<div><App/></div>转化后的结果为:

 writer by:大沙漠 QQ:22969969

React.createElement("div", null, /*#__PURE__*/React.createElement(App, null));

我们可以通过https://babeljs.io/repl这个网站去在线转化jsx,看看转化后的结果是什么

我们可以把jsx赋值给某个变量，又或者作为一个函数的参数去执行，例如:

<div id="root"></div>                   
<script type="text/babel">
  function Show(props){
    let p = props.isReact == 1 ? <p>Hello React</p> : <p>Hello World!</p>       /*将jsx赋值给p这个变量*/
    return <div>{p}</div>                                                       /*jsx的一个拼接*/
  }

  class App extends React.Component{
    constructor(props){
      super(props)
    }
    state = {isReact:1}
    test=  ()=>{
      this.setState({isReact:!this.state.isReact})
    }
    render(){                   
      return  <div>
                <button onClick={this.test}>测试</button>
                <Show isReact={this.state.isReact}></Show>
              </div>
    }
  } 
  ReactDOM.render(<App/>,root)   
</script>

效果如下:

我们在Show这个function组件内将jsx赋值给一个局部变量p，最后在return的时候进行了拼接。