react中子传父信息

思路是:

在父组件定义一个函数接受参数,接收的参数用于接收子组件的信息,把函数传给子组件,子组件调用父亲传来的函数并把要告诉父亲的话传到函数中,就实现了子传父消息

import { useState } from 'react'

import { useRef } from 'react'
// import './App.css'




function Son({onGetSonMsg}) {
const mesgForFa = "子传父亲的消息"
  return(
    <div>这是儿子组件
       <button onClick={()=>onGetSonMsg(mesgForFa)}>告诉父亲</button>
    </div>
  )
}



function App() {
  const [count, setCount] = useState(0)
const inputRef = useRef(null)
const sonMsg = (msg)=>{
    console.log(msg);
    
}


  return (
    <>
      
      <Son onGetSonMsg={sonMsg}>
      </Son>
    </>
  )
}

export default App

React ,父组件的样式可以通过给父组件的 DOM 元素添加类名或样式属性来设置,而子组件的样式一般是通过在子组件定义样式并使用 CSS Modules 或者 CSS-in-JS 的方式来实现。 父组件可以通过传递 props 给子组件来影响子组件的样式。比如可以定义一个 props,根据 props 的值来动态设置子组件的样式。子组件可以通过 props 接收父组件传递过来的样式,并应用到自己的 DOM 元素上。 举个例子,假设有一个父组件 Parent 和一个子组件 Child,代码如下: ```jsx // Parent.jsx import React from 'react'; import Child from './Child'; const Parent = () => { const style = { backgroundColor: 'red', color: 'white', padding: '10px', }; return ( <div className="parent" style={style}> <Child backgroundColor="blue" /> </div> ); }; export default Parent; // Child.jsx import React from 'react'; import styles from './Child.module.css'; const Child = ({ backgroundColor }) => { const style = { backgroundColor, color: 'white', padding: '10px', }; return <div className={styles.child} style={style}>Child Component</div>; }; export default Child; ``` 在上面的例子,父组件 Parent 给自己的 DOM 元素添加了一个类名 parent,并设置了一些样式。同时,父组件也传递了一个 props backgroundColor 给子组件 Child。子组件通过 props 接收到 backgroundColor,将其应用到自己的 DOM 元素上,并定义了一个 CSS Modules 样式类 child。 需要注意的是,子组件的样式并不会影响父组件的样式,也就是说,子组件定义的样式只会应用到子组件的 DOM 元素上,并不会影响到父组件的样式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值