导出子组件

Menu 组件

import React from "react";

function Menu({ children }) {
  return <ul>{children}</ul>;
}

function Item({ children }) {
  return <a href="#">{children}</a>;
}

Menu.Item = Item;

export default Menu;

App.js 使用

function App() {
  return (
    <div className="App">
      <Menu>
        <Menu.Item>Home</Menu.Item>
        <Menu.Item>Abount Me</Menu.Item>
        <Menu.Item>Settings</Menu.Item>
      </Menu>
    </div>
  );
}

Fragment

可以解决JSX只能有一个根元素的问题

function GetName({ name }) {
  console.log(name);
  return (
    <Fragment>
      <span>{name}</span>
      <hr />
    </Fragment>
  );
}

JSX的复用与可阅读性

将JSX保存到变量中

function App() {
  const tags = ["React", "Vue", "Angular", "Svelte", "Ember", "Preact"];
  const items = tags.map((tag, index) => <li key={index}>{tag}</li>);

  return (
    <div className="App">
      <ul>{items}</ul>
    </div>
  );
}

条件渲染的另一种形式

function App() {
  const [user, setUser] = useState();

  useEffect(() => {
    setTimeout(() => {
      setUser({ name: "John", age: 26 });
    }, 2000);
  }, [user]);

  if (!user) return <div>Loading...</div>;

  return (
    <div className="App">
      <header className="App-header">
        <p>
          {user.name} is {user.age} years old.
        </p>
      </header>
    </div>
  );
}