react学习-4.JSX语法进阶

既然JSX是JavaScript 的语法扩展，与JavaScript之间等价转换，那自然而然，我们可以在jsx中使用js语法。

1.JSX中的表达式

• JSX是支持表达式的，你只要使用一个大{ }括号，就可以使用表达式了。

我们把HelloWorld程序改写成使用表达式的。

const str = ',World'
function sayhi(name) {
  return 'Hi,' + name;
}
const element = <h1>Hello{str}{sayhi('react')}</h1>;

ReactDOM.render(element, document.getElementById('root'));   //Hello,WorldHi,react

2.JSX中的数组

• JSX中的数组进行遍历时，需要加key属性，如果没有key虽然会出来效果，但是控制台会包错。key的作用是生成虚拟DOM时，需要使用key来进行标记,DOM更新时进行比较。

    const arr = ['Hello', 'React'];
    const str1 = (
      <div>
        {arr.map(function (name) {
            return (
                <p key={name}>{name}</p>
            )
          })}
      </div>
    )
    
    ReactDOM.render(
      str1, document.getElementById('root'));
    //Hello 
    //React
  

• JSX允许直接在模版插入JavaScript变量。如果这个变量是一个数组，则会展开这个数组的所有成员。

    const arr=[
        <h1 key="Hello">Hello</h1>,
        <h2 key="React">React</h2>
    ];
    ReactDOM.render(<div>{arr}</div>, document.getElementById('root'));  
    //Hello
    //React 
  

3.JSX 属性

JSX 的标签同样可以拥有自己的属性：

const title = <h1 id="main">React Learning</h1>

• 但它和 HTML 又不是完全相同的，例如我们想要为 JSX标签添加 class 的时候需要换成className而不是class

    const title = <h1 className="main">React Learning</h1>

• 因为 JSX 的特性更接近 JavaScript 而不是 HTML，所以 React DOM 使用 camelCase 小驼峰命名 来定义属性的名称，而不是使用 HTML 的属性名称。如常用的点击事件用onClick而不是onclick等。

4.JSX 嵌套

• JSX 的标签也可以像 HTML 一样相互嵌套，一般有嵌套解构的 JSX 元素外面，我们习惯于为它加上一个小括号

    const element = (
      <div>
        <h1>Hello!</h1>
        <h2>Good to see you here.</h2>
      </div>
    );
  

• JSX 在嵌套时，最外层有且只能有一个标签，否则就会报错.

    // 这是一个错误示例 
    const title = ( 
      <h1 className="main">React Learning</h1> 
      <p>Let's learn JSX</p>
     )
  

下一篇——react学习-5.React组件