Javascript 按TouchableOpacity Avatar时将对象值绑定到组件中

我的目标是在单击婴儿头像时显示绑定到该按钮的覆盖。 让我知道如何修理它

      const OverlayForm = ({ baby }) => {
        return <BabyProfile baby={baby} />;
      }

      return (
        <React.Fragment>
          <View style={styles.main}>
            {Babies.map((baby: Baby, index) => (
              <View>
                <TouchableOpacity
                  style={styles.button}
                  onPress={() => {
                    toggleOverlay;
                    myValue = baby;
                  }}
                  key={index}
                >
                  <AvatarData baby={baby} />
                </TouchableOpacity>
              </View>
            ))}
            <Overlay isVisible={visible} onBackdropPress={toggleOverlay}>
              {OverlayForm(myValue)}
            </Overlay>
          </View>
        </React.Fragment>
      );
    }

const OverlayForm=（{baby}）=>{
返回；
}
返回(
{baby.map（（baby:baby，index）=>(
{
切换覆盖；
我的价值=婴儿；
}}
键={index}
>

我根据昆汀·格里塞尔的建议解决了这个问题

您应该在婴儿头像组件中处理覆盖，只需更改其状态即可显示/隐藏覆盖

export default function App() {
  return <BabyAvatar overlay={false} />;
}

const BabyAvatar = () => {
  const [isOverlayed, setIsOverlayed] = React.useState(false);

  const displayOverlay = () => setIsOverlayed(!isOverlayed);

  return (
    <>
    <Text>Baby overlay: {isOverlayed ? 'true':'false'}</Text>
    <Button onPress={() => displayOverlay()} title="Change overlay" />
    </>
  )
}

导出默认函数App（）{
返回；
}
常量BabyAvatar=（）=>{
const[isOverlayed，setIsOverlayed]=React.useState（false）；
const displayOverlayed=（）=>setIsOverlayed（！isOverlayed）；
返回(
婴儿覆盖：{isOverlayed？'true'：'false'}
displayOverlay（）}title=“更改覆盖”/>
)
}
您的方法是正确的。在子组件中实现覆盖更简单、更容易：）