技术标签： redux 前端 监听state改变 React.js React
import React, { Component } from 'react'
import CSSModules from 'react-css-modules'
import { connect } from 'react-redux'
import store from '../../redux/store'
import styles from './BgMusic.css'
@CSSModules(styles)
class BgMusic extends Component {
// 构造器
constructor(props) {
super(props)
console.log('执行了constructor')
// 监听state状态改变
store.subscribe(() => {
console.log('state状态改变了，新状态如下')
console.log(store.getState())
const state = store.getState()
if (state.music.play) {
// 播放背景音乐
this.audio1.play()
}
else {
// 暂停背景音乐
this.audio1.pause()
}
})
}
render() {
return (
<div className={styles.container}>
<audio ref={audio1 => { this.audio1 = audio1 }} className={styles.hidden} autoPlay="autoplay" controls="controls" loop="loop" preload="auto" src="./music/music.mp3">
你的浏览器版本太低，不支持audio标签
</audio>
</div>
)
}
}
export default connect(
// 这里的state，就是公共容器中的state，而不是当前组件的state。在这里定义了之后，在当前组件中，就可以通过this.props.music拿到该对象
state => ({ music: state.music }),
)(BgMusic)
文章浏览阅读1.3k次。面对着电脑干一天活儿--------------眼睛感觉有些累；面对着电脑干一星期活--------------眼睛感觉挺累；面对电脑干一个月的活--------------眼睛有点受不了；工作性质就得必须天天面对电脑，长年累月的眼睛实在是吃不消，从今天开始，把电脑窗_onctrlcolor更改背景颜色
文章浏览阅读210次。_charles上下行丢包率
文章浏览阅读694次，点赞3次，收藏15次。基于单片机的红外报警系统设计基本要求：通过红外传感器探测可疑入侵，通过声光报警。创新：能够区分人和动物。任务区分：A——通过播放蜂鸣声音报警。B——通过灯光闪烁报警。根据设计任务，分析设计系统的组成，给出实现设计任务的几种方案，分析比较几种设计方案的优略，本着尽量以软件代替硬件，同时力求电路简单，工作可靠的原则，确定总体设计方案。根据系统设计方案进行软、硬件的分配，软、硬件设计分别进行。_基于单片机的红外报警系统
文章浏览阅读1.7k次。目录Day01 新冠疫情可视化第一天的任务主要有两个，第一个是飞桨的本地安装，以及新冠疫情可视化。作业1:飞桨本地安装这门课程我感觉首先是可以给大家普及cv方面的知识，另一方面也是为了普及飞桨这个框架的使用。所以飞桨的本地安装。飞桨的官网：https://www.paddlepaddle.org.cn/documentation/docs/zh/install/index_cn..._def data_reader
文章浏览阅读798次，点赞20次，收藏22次。前言在 3D 机房数据中心可视化应用中，随着视频监控联网系统的不断普及和发展, 网络摄像机更多的应用于监控系统中，尤其是高清时代的来临，更加快了网络摄像机的发展和应用。在监控摄像机数量的不断庞大的同时，在监控系统中面临着严峻的现状问题：海量视频分散、孤立、视角不完整、位置不明确等问题，始终围绕着使用者。因此，如何更直观、更明确的管理摄像机和掌控视频动态，已成为提升视频应用价值的重要..._webgl 机房
文章浏览阅读119次。遥感解译数据可用于金融投资领域的其他方面有:基础设施投资: 遥感数据可用于评估基础设施项目的可行性和潜在收益，例如通过监测城市扩张和人口增长来评估投资交通基础设施的可行性。农业投资: 遥感数据可用于评估农业投资的可行性和潜在收益，例如通过监测土壤湿度和作物生长状况来评估投资农田开发的可行性。原因: 遥感数据提供了客观、全面和近实时的地理信息，可用于评估项目的可行性和潜在收益，帮助金融投资者..._遥感信息解译经济意义
文章浏览阅读298次，点赞18次，收藏10次。在前面我们学习了选择结构和条件判断，用if语句实现选择结构，关系运算符和关系表达式，逻辑运算符和逻辑表达式等知识。今天我们将接着上一篇未讲完的继续讲解。鸡汤:种一棵树最好的时间是十年前，其次是现在！加油各位一起努力！_c语言选择结构程序设计教案及答案
文章浏览阅读731次，点赞8次，收藏15次。label = 1 if ‘dog’ in img_path.split(‘/’)[-1] else 0data = Image.open(img_path)data = self.transforms(data)return data, labeldef len(self):return len(self.imgs)然后我们在train.py调用DogCat读取数据dataset_train = DogCat(‘data/train’, transforms=transform, train=True)d_alexnet优化器是adam还是sgd
文章浏览阅读1.1w次。将#include 改为#include using namespace std;_error c2677: 二进制“<<”
文章浏览阅读2.5k次。 主程序是MDI风格的，在弹出很多子窗体并同时有个模态窗体的情况下，实现定时锁屏功能，锁屏后，要使得整个应用程序都最小化，当输入所凭密码后再恢复显示成最初的状态。这个过程会有几个问题点需要解决：1、主窗体包括子窗体可以用frmMain.Hide来隐藏2、是否有弹出来模态窗体需要进行检测，如果有则需要抓出模态窗体的句柄Handle，通过对模态窗体的发消息，隐藏模态窗体3、恢复主窗体用frmMa_qt模态对话框无法隐藏
文章浏览阅读237次。Keil开发环境与虚拟串口绑定调试_keil5虚拟串口
文章浏览阅读4.3k次。Plugins扩张webpack本身的一些功能，他们会允许在各种模块解析完成以后的打包编译阶段，比如对解析后的模块文件进行压缩等。HtmlwebpackPlugin在打包结束后，自动生成一个html文件，并把打包生成的js抹开引入到该html中npm install --save-dev html -webpack-plugin// webpack.config.jsconst HtmlWebpackPlugin = require("html-webpack-plugin");module_plugins