Question

我正在尝试实现来自https://react.semantic-ui.com/modules/sidebar/#types-sidebar的侧边栏功能。但是我仍然收到未定义的“可见”错误。我想将禁用状态下的映射状态传递给道具“可见”的道具，从索引到按钮上的navbar.js。

所以我创建了一个reducer'reducers / App.js'：

    import {
      HIDE_CLICK,
      SHOW_CLICK,
      HIDE_SIDE_BAR,
    } from "../actions/app";

    const initialState = {
      visible: false
    };

    const appReducer = (state = initialState, {type}) => {
      switch(type) {
        case HIDE_CLICK:
          return {
            ...state,
            visible: false,
          }
        case SHOW_CLICK:
          return{
            ...state,
            visible: true,
          }
        case HIDE_SIDE_BAR:
          return {
            ...state,
            visible: false,
          }
      };
    }

    export default appReducer;

然后执行其操作'action / App.js'：

    export const HIDE_CLICK = "HIDE_CLICK";
    export const SHOW_CLICK = "SHOW_CLICK";
    export const HIDE_SIDE_BAR = "HIDE_SIDE_BAR";

    export const handleHideClick = () => ({
      type: HIDE_CLICK,
    })

    export const handleShowClick = () => ({
      type: SHOW_CLICK,
    })

    export const handleSideBarHide = () => ({
      type: HIDE_SIDE_BAR,
    })

现在我的组件包含：'NavBar / index.js'

    import { connect } from "react-redux";
    import NavBar from "./NavBar";

    import { handleHideClick, handleShowClick, handleSideBarHide } from "../../redux/actions/app";

    /* istanbul ignore next */
    const mapStateToProps = state => ({
      isAuthenticated: state.authentication.authenticated,
      visible: state.app.visible
    });

    const mapDispatchToProps = (dispatch) => {
      return{
        handleHideClick: () => dispatch(handleHideClick),
        handleShowClick: () => dispatch(handleShowClick),
        handleSideBarHide: () => dispatch(handleSideBarHide)
      }
    };

    export default connect(
      mapStateToProps,
      mapDispatchToProps,
    )(NavBar);

和我的“ NavBar / NavBar.js”

    import React from "react";
    import PropTypes from "prop-types";
    import { Link } from "react-router-dom";
    import { Container, Menu, Button, Sidebar,Segment, Icon, Header, Image } from "semantic-ui-react";

    export const ShowSideBar = ({
      handleShowClick,
      handleHideClick,
      handleSideBarHide
    }) => (
        <div>
          <Button.Group>
            <Button disabled={visible} onClick={handleShowClick}>
              Show sidebar
            </Button>
            <Button disabled={!visible} onClick={handleHideClick}>
              Hide sidebar
            </Button>
          </Button.Group>

          <Sidebar.Pushable as={Segment}>
            <Sidebar
              as={Menu}
              animation='overlay'
              icon='labeled'
              inverted
              onHide={handleSideBarHide}
              vertical
              visible={visible}
              width='thin'
            >
    ...

）

最后在我的root reducer上定义了app reducer：

    import { combineReducers } from "redux";

    import authentication from "./authentication";
    import app from "./app";

    const rootReducer = combineReducers({
      authentication,
      app
    });

    export default rootReducer;

Answer 1

您需要列出所有需要的道具，或者只是不破坏它们：

export const ShowSideBar = ({
  handleShowClick,
  handleHideClick,
  handleSideBarHide,
  visible
}) => (
  ....
)

或export const ShowSideBar = (props) => (...)，并使用props.

访问所有内容

React-Redux错误：“可见”未定义

1 个答案: