Javascript 基于redux状态有条件地在组件中调用函数的方式和位置
我有一个组件,在我的组件中有一些子组件 在父组件中,我有一些函数,我想从子组件触发它。所以我用redux做了 这是我的父组件:Javascript 基于redux状态有条件地在组件中调用函数的方式和位置,javascript,reactjs,redux,Javascript,Reactjs,Redux,我有一个组件,在我的组件中有一些子组件 在父组件中,我有一些函数,我想从子组件触发它。所以我用redux做了 这是我的父组件: import React, { Component } from "react"; import { withRouter } from "react-router-dom"; import { bindActionCreators } from "redux"; import { splashStop } from "store/acti
import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import { bindActionCreators } from "redux";
import { splashStop } from "store/actions/Home/splashStop";
import { connect } from "react-redux";
class Home extends Component {
constructor(props) {
super(props);
this.state = {
};
this.goPage = this.goPage.bind(this);
}
componentDidMount() {
}
goPage = () => {
this.props.history.push("/agencies");
};
render() {
if (this.props.homeSplash.splashStart == true) {
myTime.play();
}
return (
<div>
<ChildComponent />
</div>
);
}
}
const mapStateToProps = state => ({
homeSplash: state.homeSplash
});
function mapDispatchToProps(dispatch) {
return {
splashStop: bindActionCreators(splashStop, dispatch)
};
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(withRouter(Home));
我的行动:
导出常量启动\u飞溅=
“启动水花”
还有我的减速机:
import { START_SPLASH } from "store/actions/Home/splashStart";
let initialState = {
splashStart: false
};
export default (state = initialState, action) => {
switch (action.type) {
case START_SPLASH:
return { ...state, splashStart: action.payload };
default:
return state;
}
};
我的减速器,动作正常
我想知道为什么myTime.play()代码>组件安装时始终工作只是不关心此控件:
if (this.props.homeSplash.splashStart == true) {
myTime.play();
}
我把它放错地方了还是怎么了 在您的redux结构中,似乎一切正常。但您也应该提供您的childComponent,以使其更加清晰。
如果已在子组件中正确连接redux操作,请尝试以下操作:
this.triggerssplash()}>单击
将箭头函数放入单击后的onClick
。因为,在组件初始化中,所有组件函数都会在渲染时自动调用。在redux结构中,似乎一切正常。但您也应该提供您的childComponent,以使其更加清晰。
如果已在子组件中正确连接redux操作,请尝试以下操作:
this.triggerssplash()}>单击
将箭头函数放入单击后的onClick
。因为,在组件初始化中,所有组件函数都会在渲染时自动调用。能否显示如何附加triggerSplash事件。能否显示如何附加triggerSplash事件。
import { START_SPLASH } from "store/actions/Home/splashStart";
let initialState = {
splashStart: false
};
export default (state = initialState, action) => {
switch (action.type) {
case START_SPLASH:
return { ...state, splashStart: action.payload };
default:
return state;
}
};
if (this.props.homeSplash.splashStart == true) {
myTime.play();
}