Javascript 读取父状态的值并将布尔值传递给子组件

我在学习如何在React Native中在家长和孩子之间传递数据时遇到困难

在父组件中，我有一个状态属性（audioPlaying），它是一个布尔值

state = {
    //The title informs the Button and TitleArea components
    title: 'hello',
    audioPlaying: false,
};

我想在按下按钮（onPress）时更改该值

然后在我的子（按钮）组件中，我想计算audioPlaying状态属性。如果是真的，我想展示一件事，如果是假的，我想展示另一件事

<View style={styles.playBtnStyle}>
    {this.props.audioPlaying === false ? (
        <MaterialIcons
            name='play-arrow'
            size={50}
            color="#87888C"
        />
        ) : (
        <MaterialIcons
            name='pause'
            size={50}
            color="#87888C"
        />
        )}
    }
</View>

{this.props.audioPlaying==false(
) : (
)}
}

然而，当我运行这个程序时，我没有定义音频播放的价值。

以下是两者的完整文件：

App.js

import React，{Component}来自'React'；
从“react native”导入{View，StatusBar}；
从“/src/components/Carousel/Carousel”导入旋转木马；
从“./src/components/Button/Button”导入按钮；
从“/src/components/TitleArea/TitleArea”导入TitleArea；
从“./src/components/MapArea/MapArea”导入MapArea；
常量样式={
容器：{
弹性：1，
justifyContent:'之间的空间'，
},
游乐场：{
弹性：1，
},
};
导出默认类应用程序扩展组件{
状态={
//标题通知按钮和标题A组件
标题：“你好”，
有声播放：错，
};
playPauseHandler=（）=>{
this.setState（prevState=>({
audioPlaying:！prevState.audioPlaying
}));
}
render（）{
返回(
);
}
}

按钮上下文中没有此

。这只是一个返回JSX的函数。
相反，使用
props

<View style={styles.playBtnStyle}>
  {props.audioPlaying === false ? (
    <MaterialIcons
      name='play-arrow'
      size={50}
      color="#87888C"
    />
  ) : (
    <MaterialIcons
      name='pause'
      size={50}
      color="#87888C"
    />
  )}
</View>


{props.audioPlaying==false(
) : (
)}
按钮上下文中没有此
。这只是一个返回JSX的函数。
相反，使用
props

<View style={styles.playBtnStyle}>
  {props.audioPlaying === false ? (
    <MaterialIcons
      name='play-arrow'
      size={50}
      color="#87888C"
    />
  ) : (
    <MaterialIcons
      name='pause'
      size={50}
      color="#87888C"
    />
  )}
</View>


{props.audioPlaying==false(
) : (
)}
好的，我解决了自己的问题！（成为开发人员的第一步）

两个问题：

捕捉触摸事件

React Native具有所谓的触控功能。根据文档，这些是“使视图正确响应触摸的包装器”

我正在使用的TouchableOpacity：

按下时，包裹视图的不透明度降低，使其变暗。不透明度通过将子对象包装到动画.View（添加到视图层次结构）中来控制


所有触摸屏都接受onPress道具。因此，通过将onPress道具添加到触控设备，我能够捕获触控事件，而不仅仅是触发它

将回调传递给父级

这篇文章帮助我进一步了解了如何从子函数调用父函数


因此，我在TouchableOpacity中调用playPause（）（我重命名了该道具并对其进行了分解），它从一个触摸事件触发，导致状态改变，组件重新渲染


const按钮=（道具）=>{
常数{
标题
音频播放，
暂停播放，
}=道具；
返回(
播放暂停（）}>
{audioPlaying===错误(
) : (
)
}
第一章：
{title}
);
};好的，所以我解决了我自己的问题！（成为开发人员的第一步）

两个问题：

捕捉触摸事件

React Native具有所谓的触控功能。根据文档，这些是“使视图正确响应触摸的包装器”

我正在使用的TouchableOpacity：

按下时，包裹视图的不透明度降低，使其变暗。不透明度通过将子对象包装到动画.View（添加到视图层次结构）中来控制


所有触摸屏都接受onPress道具。因此，通过将onPress道具添加到触控设备，我能够捕获触控事件，而不仅仅是触发它

将回调传递给父级

这篇文章帮助我进一步了解了如何从子函数调用父函数


因此，我在TouchableOpacity中调用playPause（）（我重命名了该道具并对其进行了分解），它从一个触摸事件触发，导致状态改变，组件重新渲染


const按钮=（道具）=>{
常数{
标题
音频播放，
暂停播放，
}=道具；
返回(
播放暂停（）}>
{audioPlaying===错误(
) : (
)
}
第一章：
{title}
);
};当我这样做时，按钮仍然没有改变。我希望在每次按下时改变状态值。也许它没有这么做？道具只是收到了一个价值。这就是我困惑的原因。这只是阅读状态。onPress正在调用setState，这将迫使我无法理解它。请尝试使用
setState（{audioPlaying:！prevState.audioPlaying}）
，而不是使用
setState（{audioPlaying:！this.state.audioPlaying}）
。我在JSFIDLE中运行了一个测试，这对我来说有了很大的不同，尽管我现在还不确定为什么。它对我来说仍然不起作用。我在我的按钮组件中记录了状态，发现我的“音频播放”状态正在从父级传递到子级。然而，我的onPress道具并不像我想象的那样调用函数。我试过了，但还是不行。onPress={（）=>this.playPauseHandler（）}当我这样做时，按钮仍然没有改变。我希望在每次按下时都改变状态值。大概
<View style={styles.playBtnStyle}>
  {props.audioPlaying === false ? (
    <MaterialIcons
      name='play-arrow'
      size={50}
      color="#87888C"
    />
  ) : (
    <MaterialIcons
      name='pause'
      size={50}
      color="#87888C"
    />
  )}
</View>