react中JSX的注意點有哪些

今天小編給大家分享一下react中JSX的注意點有哪些的相關(guān)知識點，內(nèi)容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

1 JSX 是一個表達式

JSX 是 JavaScript 的語法擴展，本質(zhì)上是 React.createElement()方法的語法糖。

Babel 會把 JSX 轉(zhuǎn)譯成一個名為 React.createElement() 函數(shù)調(diào)用，所以它被看作一個表達式。

這意味著你可以在 if 語句和 for 循環(huán)的代碼塊中使用 JSX，將 JSX 賦值給變量，把 JSX 當(dāng)作參數(shù)傳入，以及從函數(shù)中返回 JSX：

function getGreeting(user) {
  if (user) {
    return <h2>Hello, {formatName(user)}!</h2>;
  }
  return <h2>Hello, Stranger.</h2>;
}

2 JSX 的屬性

2.1 駝峰命名

JSX 是 JS 的擴展，所以使用駝峰命名來定義屬性的名稱，而不使用HTML 屬性名稱的命名約定

比如：

<div className="container"></div>

上述 JSX 表達式中 class 寫作 className

2.2 style 接收一個對象

style 接收一個對象，而不是字符串

比如：

let style = {
    width: "100px",
    height: "100px",
    background: "red"
};
ReactDOM.render(
    <div className="box" style={style}></div>,
    document.querySelector("#root")
);

3 JSX 標簽沒有子元素

如果一個標簽中沒有內(nèi)容，可以使用/>來閉合標簽

比如：

const element = <img src={user.avatarUrl} />;

4 JSX 防止注入攻擊

可以安全地在 JSX 中插入用戶輸入內(nèi)容

React DOM 在渲染所有輸入內(nèi)容之前，默認會進行轉(zhuǎn)義。它可以確保在你的應(yīng)用中，永遠不會注入那些并非自己明確編寫的內(nèi)容。所有的內(nèi)容在渲染之前都被轉(zhuǎn)換成了字符串。這樣可以有效地防止 XSS攻擊。

5 唯一父元素

JSX 表達式必須有一個父元素

換句話說，下面的寫法會報錯

ReactDOM.render(
    <div className="box" style={style} />
    <input type="text" />,
    document.querySelector("#root")
);

正確的寫法：

ReactDOM.render(
    <div>
        <div className="box" style={style} />
        <input type="text" />
    </div>,
    document.querySelector("#root")
);

如果我們不想讓父元素被渲染在頁面上，可以使用React.Fragment

React.Fragment 組件能夠在不額外創(chuàng)建 DOM 元素的情況下，讓 render() 方法中返回多個元素。

render() {
  return (
    <React.Fragment>
      Some text.
      <h3>A heading</h3>
    </React.Fragment>
  );
}

也可以使用其簡寫語法 <></>，請參閱 React v16.2.0: Fragments 支持改進。

render() {
  return (
    <>
      Some text.
      <h3>A heading</h3>
    </>
  );
}

以上就是“react中JSX的注意點有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注億速云行業(yè)資訊頻道。