目标是当我将鼠标悬停在导航栏上的链接上时,我需要显示一个组件调用 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/

10-12 01:09
查看更多