三个最简单的例子让你看懂使用hooks在组件间传递数据的写法

首先来两个组件App和它的子组件Test

第一个需求：我们在App组件中初始化一个数据'111'，传递给子组件Test，让其以h1显示出来

//App.js
import React,{useState} from 'react'
import Test from './componens/test';

function App() {
    //解构出初始值
  const [title] = useState('111')

  return (
    <div className="App">
        //传递给子组件初始值
      <Test title={title}/>
      
    </div>
  );
}

export default App;

可以看到父组件只有两个操作：解构拿到初始值然后传递给子组件

//Test.js
import React from 'react';

function Test(props){
    const {title} = props; 
    return(
        <div>
            <h1>{title}</h1>
        </div>
    )
}

export default Test;

子组件从props参数中解构出title就可以直接使用了

第二个需求：在第一个需求完成的基础上，在子组件中添加一个更改数据的按钮，点击这个按钮更改原数据为'222'

//App.js
import React, { useState } from "react";
import Test from "./componens/test";

function App() {
    //解构出setTitle
  const [title, setTitle] = useState("111");
  
    //定义change函数，在这个函数中用setTitle更改原数据
  const changeTitle = () => {
    setTitle('222');
  };
  
  return (
    <div className="App">
        //向子组件传递change函数
      <Test title={title} changeTitle={changeTitle} />
    </div>
  );
}

export default App;

由于单一数据流的缘故，子组件不可以直接更改父组件的数据，需要父组件抛出函数，再由子组件触发该函数改变数据

//Test.js
import React from 'react';

function Test(props){

    //从props参数中解构出值和change函数
    const {title,changeTitle} = props; 
    
    return(
        <div>
            <h1>{title}</h1>
            //button按钮点击触发change函数
            <button onClick={changeTitle}>更改</button>
        </div>
    )
}

export default Test;

第三个需求：在前两个需求完成的基础上，由子组件来设置更改的数据，将其作为参数传到父组件后由父组件接收并更改

//App.js
import React, { useState } from "react";
import Test from "./componens/test";

function App() {

  const [title, setTitle] = useState("111");
  //用子组件传过来的参数title更改原数据
  const changeTitle = (title) => {
    setTitle(title);
  };
  
  return (
    <div className="App">
      <Test title={title} changeTitle={changeTitle} />
    </div>
  );
}

export default App;

//Test.js
import React from 'react';

function Test(props){
    const {title,changeTitle} = props; 
    //console.log(title)
    return(
        <div>
            <h1>{title}</h1>
            //触发change函数时，将要更改的值'333'以参数传回父组件
            <button onClick={()=>changeTitle('333')}>更改</button>
        </div>
    )
}

export default Test;

这里子组件使用箭头函数，是由于我们希望点击之后再执行这个函数，此时打印一下title会输出111，点击按钮后才会输出333。如果直接放入参数，还未点击button就会直接执行change函数导致报错，此时打印一下title你就会发现111和333都会输出