Fork me on GitHub

React学习笔记 - JSX语法

JSX, 一种 JavaScript 的语法扩展

JSX中使用表达式

你可以任意地在 JSX 当中使用 JavaScript 表达式,在 JSX 当中的表达式要包含在大括号里。

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

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

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

JSX本身也是一种表达式

可以将JSX作为参数传入,或者为传出值

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

JSX 属性

const element = <div tabIndex="0"></div>;
// 注意不要使用引号,如果使用引号则默认是当做字符串
const element = <img src={user.avatarUrl}></img>;

JSX嵌套

如果 JSX 标签是闭合式的,那么你需要在结尾处用 />, 就好像 XML/HTML 一样:

const element = <img src={user.avatarUrl} />;
const element = (
	 <div>
    	<h1>Hello!</h1>
    	<h2>Good to see you here.</h2>
  	</div>
)