Astro 语法与 JSX 对比

1import classNames from 'classnames';
2
3{/* 与 React 中的写法对比 */}
4<h1 className={classNames([highlighted && 'highlighted'])}>
5    {welcome}
6</h1>

1// React 中的循环写法：
2{technologies.map((technology, index) => (
3    <li key={index}>{technology}</li>
4))}
5
6// Astro 中的循环写法：
7{technologies.map(technology => (
8    <li>{technology}</li>
9))}

1{technologies?.length && (
2    <ul>
3        {technologies.map(technology => (
4            <li>{technology}</li>
5        ))}
6    </ul>
7)}

1---
2const user = undefined;
3---
4
5{user
6    ? <h1>Welcome {user.name}!</h1>
7    : <h1>Welcome Guest!</h1>
8}

1---
2const displayAsLink = false;
3const Element = displayAsLink ? 'a' : 'div';
4---
5
6<Element href={displayAsLink && '#link'}>
7    这将被渲染为链接或 div 元素。
8</Element>

1// JSX
2<h1 className="title" dataHidden={false} />
3
4// Astro 模板
5<h1 class="box" data-hidden={false} />

1<Accordion
2    isOpen={false}
3    showIcon={true}
4/>

1---
2// 多个元素可以无需包装片段直接渲染
3---
4
5<p>无需使用包装片段。</p>
6<p>Astro 支持多个根元素。</p>

1---
2const html = '<h1>🚀 Hello from Astro 👋</h1>';
3---
4
5<Fragment set:html={html} />

1---
2const handleClick = () => {
3    console.log('按钮被点击');
4}
5---
6
7<!-- ❌ 这种写法不会生效 -->
8<button onClick={handleClick}>点击我</button>
9
10<!-- ✔️ 这种写法会生效 -->
11<button id="button">点击我</button>
12<script>
13    document.getElementById('button').addEventListener('click', () => {
14        console.log('按钮被点击');
15    });
16</script>

1{/* 这个注释会在构建输出中被移除 */}
2
3<!-- 这个注释会保留在构建输出中 -->