---

---

项目地址

• 教程作者：
• 教程地址：

• 代码仓库地址：

• 所用到的框架和插件：

七、数据流

7.1 子组件传递数据给父组件

7.1.1 方式一：給父设置回调函数，传递给子

父组件的设置

子组件

7.1.2 方式二：直接将父的setState传递给子

• 该方法父子严重耦合，复用性低，适合父子严重绑定的组件

7.2 给props传递jsx

定义个导航条，可以是组件形式，也可以直接是jsx const nav = <div</div>

//导航组件
function Nav() {
   
  return (
    <div className="menu">
      <a href="/">首页</a>
      <a href="/product">产品</a>
      <a href="/user">用户</a>
    </div>
  );
}

7.2.1 方式一：直接传递组件给子类

父类拥有导航组件的控制权

• 子组件使用：直接使用

function Layout({
     nav, children }) {
   
  return (
    <div className="container">
      <nav>{
   nav}</nav>
      <main>{
   children}</main>
    </div>
  );
}

7.2.2 方式二：传递函数给子组件

由于传递的组件以函数形式传递，控制权在子

• 子组件使用：加了反斜杠，以组件形式使用

function Layout({
     Nav, children }) {
   
  return (
    <div className="container">
      <nav>{
   <Nav />}</nav>
      <main>{
   children}</main>
    </div>
  );
}

7.3 props类型验证

1. 子组件添加验证
   

• 可以使用TypeScripts来验证

7.4 props的多层传递

1. 祖父组件需要传递数据

function App() {
   
  const userData = {
   
    count: 32.95,
    rate: "↑8.98%",
  };

  return (
    <main className="container">
      <UserDataCard message="hello world" userData={
   userData} />
    </main>
  );
}

2. 中间层接受数据，并传递给下一层
   
3. 最后一层使用数据

function UserData({
     userData }) {
   
  return (
    <div style={
   {
    display: "grid", gap: "12px" }}>
      <h1>用户数据</h1>
      <h2>{
   userData.count} k</h2>
      <p>{
   userData.rate}，与上月相比</p>
    </div>
  );
}

7.5 className的传递以及合并

props已经包含了父类的className，如果需要单独设置，就需要传递

1. 父类需要添加的className

2. 子类接受父类传来的className时候，需要用字符串拼接，以免覆盖之前的className

八、State进阶

8.1 不同组件之间的状态共享

8.1.1 组合组件

1. 设置一个有两个组件的App，一个是显示列表，一个统计列表

function App() {
   
  return (
    <main className="container">
      {
   /* 展示笔记列表 */}
      <NoteList />
      {
   /* 处理用户输入 */}
      <input type="text" placeholder="输入笔记内容" />
      {
   /* 添加用户输入 */}
      <button>添加笔记</button>
      {
   /* 展示笔记总数 */}
      <NoteCount/>
    </main>
  );
}

8.1.2 找到公共父组件设置状态

找到这2个组件最近的公共父组件，这里是App，然后添加管理所有notes的State和管理单个note的State；

1. 需要一个记录所有notes变化的状态
2. 一个记录单个notes变化的状态

  //所有notes的状态
  const [notes, setNotes] = useState([]);
  //单个note的状态
  const [note, setNote] = useState("");

8.1.3 根据组件的功能添加事件

①组件NoteList 用来展示所有notes的，所以他需要传递一个notes；
②input标签是用户输入的内容，他需要value来显示单个note的内容，并且需要将内容保存在状态里setNote,传参方式；
③button 需要将单个note添加到notes里；
④NoteCount组件&