react中，函数组件传值问题

1.1. 父组件向子组件传递 （props）。注意这是函数组件，没有this

import './App.css';

import FuncComponent from "./component/FunComponent"
function App() {
  return (
    <div className="App">
        <FuncComponent username="wjl" />

    </div>
  );
}

export default App;

function funComponet(props) {
    let {username} = props
        return (<div>
            这是一个函数组件
            {username}
        </div>)
}
export default funComponet

2.子传父

父级自定义属性。

import './App.css';

import FuncComponent from "./component/FunComponent"
function App() {
    function ziChuanfu(data) {
        console.log(data)
    }
  return (
    <div className="App">
        <FuncComponent username="wjl" onMessage={ziChuanfu} />
 
    </div>
  );
}

export default App;

function funComponet(props) {
    let {username,onMessage} = props
    function ziZujian(){
        onMessage("这是子组件传过来的数据")
    }
        return (<div>
            这是一个函数组件
            {username}
            <button onClick={ziZujian}>按钮</button>
        </div>)
}
export default funComponet