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;