React中下面这种情况如何完成子组件向父组件传值?

韩xiao方MY
  • 26

React中下面这种情况如何完成子组件向父组件传值?
我自己写的一个小案例,我需要从AirMain里获取一个数据传递到Wrapper中,该如何处理呢?

image.png
我首先想到了我给 Wrapper定义了一个方法 然后再把这个方法当成 airMain 的属性 想让他调用 发现会报错 总感觉不是父传子
image.png

是我哪里理解错了吗?特来请教

回复
阅读 679
3 个回答
✓ 已被采纳

多理解理解react的单向数据流的思路,状态谁关注谁持有,这个情况父组件关注的状态就应该在父组件里,只是将状态的修改权限通过props下放到子组件,子组件在用户输入之类的动作触发下,调用使用父组件下放的修改方式来达到更新父组件状态的目的。类似input组件,给一个onChange,input接受用户输入,修改到具体的组件状态中。

ts类型没申明

你的AirMain组件在哪个组件里使用,那getOpacity方法应该写在哪个组件中
看你的截图,AirMain组件应该是在AirCondition组件里,所以getOpacity方法应该写在AirCondition里,而不是Wrapper,在AirCondition里再把状态传给Wrapper

const AirCondition: RecordingState.FC = () => {
  const [opacity, setOpacity] = useState(0)

  // ...其他逻辑

  return (
    <Wrapper opacity={opacity} >
      <AirMain setOpacity={setOpacity} />
    </Wrapper>
  )
}

或者,把AirMain组件放到Wrapper组件里去

宣传栏