认识JSX——知识梳理

《认识JSX——知识梳理》

JSX,是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX,JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。使用JSX,可以在在 UI 中展示准备好的数据。

例如:

const element = <h1>Hello, world!</h1>;

JSX中嵌入表达式

在搭建好的项目中嵌入表达式。

我这个是app.js文件,所以需要return。

import React from 'react';
import ReactDOM from 'react-dom';
import './App.css';
const name = 'muimui';
const element = <h1>hello,{name}</h1>
function App() {
  return (
    ReactDOM.render(
      element,
      document.getElementById('root')
    )
  )

}

export default App;

JSX 也是一个表达式

可以在 if 语句和 for 循环的代码块中使用 JSX,将 JSX 赋值给变量,把 JSX 当作参数传入,以及从函数中返回 JSX。

例如:user是JSX表达式。

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

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


JSX 特定属性

如果JSX表达式中有变量。可以用''来制定,也可以用{}来定义。

例如:

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



const element = <div tabIndex="0"></div>;

JSX 表示对象

下面的两种代码是等效的。

import React from 'react';
import ReactDOM from 'react-dom';
import './App.css';

const a1 = <h1 className='a1'>hello,world!</h1>;
const b1 = React.createElement(
  'h1',
  { className: 'b1' },
  'hello,world!'
)
function App() {
  return (
    ReactDOM.render(
      b1,
      document.getElementById('root')
    )

  )
}

export default App;


点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注