在JSX中嵌入javascript表达式

，要使用在JSX中用大括号{}将包javascript表达式包起来就可以使用了。

在大括号{ }中可以使用：

• javascript表达式，计算过得到的
• 变数或常数
• 阵列值
• 回呼函式
• 三元运算子
• /.../注解

等等...

function greeting(){
	return 'Hello'
};
const name = 'Amy';


function App() {
  return (
  <h1>
    {greeting()+ ','+name}
  </h1>
)};

在 JSX 中使用 三元运算子

因为只能使用 JavaScript表达式，所以在 JSX 无法使用 if (if 是一个陈述式) ，但是可以使用 JavaScript 三元运算子。

function App() {
  return (
  <a>{data.login?'登出':'登入'}</a>
)};

JSX 本身也是 Javascript 表达式

在编译之後，JSX转换成一个function返回的Javascript的物件形式（请参考第七天的文章）。

可以在function里的if 跟 for 回圈中使用 JSX，可以在JSX中使用function传入的参数。

function getName(name) {
  if (name {
    return <h1>Hello, {name}!</h1>;
  }
  return <h1>Hello, admin.</h1>;
}

JSX的标签

React可以使用html标签和React自定的元件标签

html标签使用英文小写字做为开头

const element =<div>Hello!</div>

自订元件标签使用英文大写字做为开头(可使用大驼峰写法)

const element =<MyComponent>Hello!</MyComponent>

JSX 的属性

跟 HTML 一样 JSX 的 tag 可以有属性：

可以使用引号，引号里面的属性值的型态是字串

const element = <img src="image/image.jpg" />;

也可以透过 { } 使用javascript给予不同型态的动态属性值：

const element = <img src={webImage.Url} />

因为 JSX 是 JavaScript，所以React元素的属性名称也是按照 JavaScript 原生的语法中的className去定义属性。而 for 则是要用 htmlFor。

例如：

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

JSX的子元素(Children)

在 JSX 包含开始与结束标签的情形下，夹在两者之间的内容为children，我们可以靠children传递状态（ prop）到元件之中。在後面文章会详细说明React的prop传递。

Children的类型有很多种：

JavaScript 表达式、字串、Functions、另一个元件都能是Children。

const element = 
<MyComponent> 
'标签里面的都称为Children'
</MyComponent>

如果标签内为空，要用 /> 关闭这个标签

const element = <img src={webImage.Url} />

JSX语法中只能有一个根元素

多个元素的情况下会造成无法编译为React.createElement的形式

需要把子元素包在一个根元素下面，像下面范例中最外层的 <div></div>。

//错误
function App() {
  return (
  <h1>标题</h1>
	<p>内文</p>
)};

//必须有根元素
function App() {
  return (
	<div>
		  <h1>标题</h1>
			<p>内文</p>
	</div>
)};

从 React 16 起，新增了 Fragment 的功能，让你不需要在 DOM 中增加这个额外节点了：

function App() {
  return (
	<>
		  <h1>标题</h1>
			<p>内文</p>
	</>
)};