- JSX必须有一个根节点,如果没有根节点,可以使用<></>(幽灵节点)替代
- 所有标签必须形成闭合,成对闭合或者自闭合都可以
1.JSX列表渲染
// 来个列表
const lists= [
{ id: 1, name: '周姐林' },
{ id: 2, name: '邓紫棋' },
{ id: 3, name: '魏净重' }
]
function App() {
return (
<div className="App">
<ul>
{
lists.map(item => <li>{item.name}</li>)
}
</ul>
</div>
)
}
export default App
2.JSX条件渲染
const flag = true
function App() {
return (
<div className="App">
{/* 条件渲染字符串 */}
{flag ? '你好' : '你不好'}
{/* 条件渲染标签/组件 */}
{flag ? <span>我是杰伦</span> : null}
</div>
)
}
export default App
3.JSX样式处理
行内样式 - style
function App() {
return (
<div className="App">
<div style={{ color: 'red' }}>我是周揭露</div>
</div>
)
}
export default App
行内样式 - style - 更优写法
const styleObj = {
color:red
}
function App() {
return (
<div className="App">
<div style={ styleObj }>我是揭露</div>
</div>
)
}
export default App
类名 - className
app.css文件
.title {
font-size: 30px;
color: blue;
}
import './app.css'
const showTitle = true
function App() {
return (
<div className="App">
<div className={ showTitle ? 'title' : ''}>this is a div</div>
</div>
)
}
export default App