reactjs - React-Redux - 显示和隐藏组件

Question

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

操作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)操作，但我很困惑，我是否需要一些帮助，谢谢。

Answer 1

我假设您将鼠标悬停在导航栏项目上，并且该项目需要显示在 ProductDescription 中，这可以接受 null 参数。

您需要将导航栏组件连接到 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 并将 get 映射到您的 props 中。这样，您就可以使用 Action 创建器从 props 中调度这些 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);