目标是当我将鼠标悬停在导航栏上的链接上时,我需要显示一个组件调用 ProductDescription,并在鼠标未悬停时隐藏该组件。
我有一个例子
https://www.dkny.com/ba/
目标是制作这样的东西。
app.js
import React, { Component } from 'react';
import PaginaInicial from '../containers/index';
import ListaJogos from '../containers/lista_jogos';
import ListaMusicas from '../containers/lista_musicas';
import NavBar from '../containers/menu';
import ProductDescription from '../containers/produto';
export default class App extends Component {
render() {
return (
<div>
<NavBar />
<ProductDescription />
</div>
);
}
}
导航栏组件
import React, { Component } from 'react';
class NavBar extends Component{
render(){
return (
<div>
<ul>
<li><a href="#">Link 1</a></li>
</ul>
</div>
)
}
}
export default NavBar;
产品描述 组件
import React, { Component } from 'react';
class Produto extends Component{
render(){
return(
<div>Some Product Description</div>
)
}
}
export default ProductDescription;
Action index.js
function mostrarProduto(product) {
return {
type: 'SHOW_PRODUCT',
payload: product
}
}
function esconderProduto(product) {
return {
type: 'HIDE_PRODUCT',
payload: product
}
}
产品 reducer
const productReducer = (state = null, action) => {
switch (action.type) {
case 'SHOW_PRODUCT':
return action.payload;
case 'HIDE_PRODUCT':
return null;
default:
return state;
}
}
我不知道我必须在组件中做什么,我知道我必须分派(dispatch) Action ,但我很困惑,我需要一些帮助吗,谢谢。
最佳答案
我将假设您将鼠标悬停在导航栏项目上,并且该项目需要显示在 ProductDescription 中,这可以接受 null 参数。
您需要将 Navbar 组件连接到 redux 存储(或者更好的是,创建一个连接到 redux 存储的导航栏“智能”容器)并绑定(bind)您的操作。
import React from 'react';
import { connect } from 'react-redux';
import { mostrarProduto, esconderProduto } from 'actions/index.js';
export class Navbar extends React.Component {
constructor(props) {
super(props);
this.showProduct = this.showProduct.bind(this);
this.hideProduct = this.hideProduct.bind(this);
}
showProduct() {
// Bind object however you like
this.props.mostrarProduto(productObjHere);
}
hideProduct() {
// Bind object however you like
// Also, if only want to show a single product on mouse over,
// you don't need to pass product object; your reducer also returns null
// for this one.
this.props.esconderProduto(productObjHere);
}
render() {
return (
<ul>
<li>
<a href="#" onMouseOver={this.showProduct} onMouseOut={this.hideProduct}>
Link #1
</a>
</li>
</ul>
);
}
}
const { func } = React.PropTypes;
Navbar.propTypes = {
mostrarProduto.isRequired,
esconderProduto.isRequired
};
export default connect(
() => {},
{ mostrarProduto, esconderProduto }
)(Navbar);
您将操作传递到 redux connect 并将其映射到您的 Prop 中。通过这种方式,您可以使用 Action 创建器从 Prop 中分派(dispatch)这些 Action 。
然后在您的产品描述中,您将状态映射到 Prop (无操作)并显示数据。
import React from 'react';
import { connect } from 'react-redux';
export class ProductDescription extends React.Component {
render() {
return (
<div>{this.props.hoveredProduct}</div>
);
}
}
const { func } = React.PropTypes;
const mapStateToProps = state => ({
hoveredProduct: state.product
});
// I used different names for state and mapped prop, so the declaration
// is clear
export default connect(
mapStateToProps,
null
)(ProductDescription);
关于reactjs - React-Redux - 显示和隐藏组件,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/41862195/