JSX的基本使用
- JSX 变量引用
- JSX 函数调用
- JSX 方法调用
- JSX 遍历数组
- JSX 条件渲染
- JSX 事件绑定
JSX 变量引用
const userName = "BLU";
function App() {return (<div className="App"><p>Hello, {userName}!</p></div>);
}
export default App;
JSX 函数调用
function getName () {return "BLU";
}
function App() {return (<div className="App"><p>Hello, {getName()}!</p></div>);
}
export default App;
JSX 方法调用
function App() {return (<div className="App"><p>{new Date().getDate()}</p></div>);
}
export default App;
JSX 遍历数组
注意:key 是 React 框架内部使用的用于提升更新性能的属性。
const list = ['Item 1', 'Item 2', 'Item 3'];
function App() {return (<div className="App">{list.map((item, index) => (<li key={index}>{item}</li>))}</div>);
}
export default App;
JSX 条件渲染
通过 逻辑与运算符&&
和 三元表达式
实现条件渲染:
const loading = true;
function App() {return (<div className="App">{loading && <p>loading...</p>}{loading ? <p>loading...</p> : <p>loaded!</p>}</div>);
}
export default App;
通过自定义函数
实现复杂条件渲染:
const articleType = 1;function getArticleType() {if (articleType === 0) {return <div>无图文章</div>} else if (articleType === 1) {return <div>单图文章</div>} else {return <div>多图文章</div>}
}function App() {return (<div className="App">{getArticleType()}</div>);
}export default App;
JSX 事件绑定
- 基础事件绑定
function App() {const handleClick = (e) => {console.log("button被点击了", e);}return (<div className="App"><button onClick={handleClick}>Click Me</button></div>);
}
export default App;
- 传递自定义参数
function App() {const clickHandler = (name) => {console.log("Hello " + name);}return (<div className="App"><button onClick={() => clickHandler('BLU')}>Click Me</button></div>);
}
export default App;
- 传递自定义参数和事件参数
function App() {const clickHandler = (name, e) => {console.log("Hello " + name, e);}return (<div className="App"><button onClick={(e) => clickHandler('BLU', e)}>Click Me</button></div>);
}
export default App;