React父子传值

父传子：

父组件发送值：假设引入了组件名为 Hello，只需要在组织上挂上一个变量然后给里面写入值就可以。

 <Hello arr={[{ title: '标题1', url: 'http://localhost' }, { title: '标题2', url: 'http://localhost' }, { title: '标题3', url: 'http://localhost' }, { title: '标题4', url: 'http://localhost' }]} />

子组件接收：在函数里面接受一个props，里面包含了夫组件传递过来的所有参数，只需要props.参数名就可以拿到参数例如：props.arr

export default function Hello(props) {
    return (
        <div>
            <ul>
                {
               props.arr.map((v, i) => <li key={i}><a href={v.url}>{v.title}</a></li>)
                }
            </ul>
        </div>
    );
}

子传父

在父组件定义一个函数，接受一个参数，然后挂到子组件上面， 在子组件中之只需要用porps接受这个函数，把参数丢进去就可以了。

父组件：

import Hello from './components/list/Hello.jsx'
function App() {
  let getinfo = (val) => {
    console.log(val);
  }
  return (
    <div className="App">
      <Hello fuc={getinfo}  />
    </div>
  );
}
export default App;

子组件：

import { useState } from 'react';
export default function Hello(props) {
    let [pwd] = useState(11111)
    let clicksend = () => {
        props.fuc(pwd)
    }
    return (
        <div>
            <button onClick={clicksend}>点我</button>
        </div>
    );
}