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

Question

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

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

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

Answer 1

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

Answer 2

ts类型没申明

Answer 3

你的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组件里去