React02 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;