- Objective:
- Breadcrumb:
# 概念阐释
## 语义
在JSX中，多个属性的情况下，可以先储存在变量或者对象中，再以调用变量或对象的方式写入[[JSX Elements]]中。适用于`<img>` `<input>` `<a>` 这样的元素
# 实例
## 属性存储在变量中
```jsx
const sideLength = "200px";
const panda = <img src="image/panda.jpg" alt="panda" height={sideLength} width={sideLength} /> ;
```
## 属性存储在对象中
```jsx
const pics = {
panda: "http://bit.ly/1Tqltv5",
owl: "http://bit.ly/1XGtkM3",
owlCat: "http://bit.ly/1Upbczi"
}
const image = (
<img src={pics.panda} alt="lazy panda" />
<img src={pics.owl} alt="unimpressed Owl" />
<img src={pics.owlCat} alt="Ghastly Abomination />
);
```
# 相关内容
# 问题
将img的链接储存在变量中，并在元素中引用
```jsx
import React ...
import { createRoot } from ...
const container = ...
const root =...
const goose = 'https://content.codecademy.com/courses/React/react_photo-goose.jpg';
// Declare new variable here:
const gooseImg =
root.render(gooseImg);
```
# 问题答案
```jsx
import React from 'react';
import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container);
const goose = 'https://content.codecademy.com/courses/React/react_photo-goose.jpg';
// Declare new variable here:
const gooseImg = <img src={goose} />
root.render(gooseImg);
```
# 参考资料
[Variable Attributes in JSX](https://www.codecademy.com/journeys/full-stack-engineer/paths/fscj-22-front-end-development/tracks/fscj-22-react-part-i/modules/wdcp-22-jsx-752c2293-9f61-412a-92e2-70ad6e01a0a7/lessons/react-jsx-advanced/exercises/jsx-variable-attributes)