JS表达式和语句(代码)

js表达式

• 一个表达式会产生一个值，可以放在任何一个需要值的地方

  (1) a
  (2) a+b
  (3) demo(1)
  (4) arr.map() 
  (5) function test () {}

js语句(代码)

  (1) if(){}
  (2) for(){}
  (3) switch(){case:xxxx}

JSX 语法

• 在 jsx 中只能使用 js 的表达式，不能使用 js 语句(代码)
• 在 jsx 中想使用 js 的表达式，需要用“｛｝”把表达式包裹起来

// 1
  const data = 'Hello, world';
  const element = <div>{ data }</div>
  ReactDOM.render(element, document.getElementById('test'));

// 2
  const a = 1;
  const b = 2;
  const element = <h1>{ a + b }</h1>;
  ReactDOM.render(element, document.getElementById('test'));

// 3
  function fun (){
    return 'Hello, world';
  };
  const element = <h1>{fun()}</h1>;
  ReactDOM.render(element, document.getElementById('test'));

// 4
  const data = ['Angular','React','Vue'];
  const element = (
    <div>
      <h1>前端js框架列表</h1>
      <ul>
        {
          data.map((item,index)=>{
            return <li key={index}>{item}</li>
          })
        }
      </ul>
    </div>
  )
  ReactDOM.render(element, document.getElementById('test'));

// 5
  const element = (
    <h1>
      {
        function fun() {
          return 'Hello, world';
        }()
      }
    </h1>
  )
  ReactDOM.render(element, document.getElementById('test'));