reactjs - 在 react redux 中分派(dispatch)对子组件的操作的惯用方法,而无需一直传递 props

标签 reactjs typescript redux react-redux

我目前正在学习如何使用 react、redux 和 react-redux,并且有一个相当简单的需求。我想呈现类似于以下内容的内容...

--------------------------------
| title 1         |----------| | 
| description 1   | button 1 | |
| desc... cont.   |----------| |
|------------------------------|
| title 2         |----------| | 
| description 2   | button 2 | |
| desc2... cont.  |----------| |
|------------------------------|
| title 3         |----------| | 
| description 3   | button 3 | |
| desc3... cont.  |----------| |
|------------------------------|

这表示 Items 的列表。每个 Item(图中显示 3 个)都有一个 title 和一个 description。当我单击按钮时,我想对该 Item 执行一些操作,例如显示带有 Item's 标题的警告框。

我设法根据 Redux Tutorial 制作了一个工作样本.我最终得到了 1 个名为 ItemsContainer.tsx 的容器(智能)组件和两个名为 ItemList.tsx(列表)和 Item.tsx 的演示(哑)组件(单个项目)。从层次上看,它看起来像这样......

App
-- ItemsContainer
---- ItemList
------ Item
------ Item

但是,与 Redux 教程一样,这要求我通过 Prop 将 onClick 函数传递给每个演示组件。如果我有更深的嵌套,这可能会变得很麻烦,所以我正在尝试寻找另一种方法。

我现在有两个容器组件 ItemListContainer.tsxItemContainer.tsx 和两个展示组件 ItemList.tsx项目.tsx。但是,每当我单击按钮时,我的警告框只会显示 [Object object]。我相信正在发生的事情实际上是在接收按钮点击事件,而不是 Item.id 但我不确定从这里到哪里才能确保将正确的功能分配给 onClick。从层次上看,它看起来像这样......

App
-- ItemListContainer
---- ItemList
------ ItemContainer
-------- Item
-------- Item

代码如下...

// app.tsx
import * as React from 'react';
import { ItemListContainer } from '../addItem/ItemListContainer';

export const App = () => {
    return <div><ItemListContainer/></div>;
};
// itemListContainer.tsx
import { ItemList } from './itemList';
import { connect } from 'react-redux';


function mapStateToProps(state: any): any {
    return {
        items: state.items
    }
}

export const ItemListContainer = connect(mapStateToProps, null)(ItemList);
// itemList.tsx
import * as React from 'react';
import { IItems, IItemSummary } from '../../data/Items/models/Item';
import { ItemContainer } from './ItemContainer';

export const ItemList = (props: IItems) => {

    let divStyle = {
            position: 'block',
            border: 'solid #aeb0b5 1px',
            overflowY: 'auto',
            overflowX: 'hidden',
            width: 650,
            height: 300
    };

    return (
        <div style={divStyle}>
            {
                props.items.map(function (item: IItemSummary) {
                    return <ItemContainer {...item} />;
                })
            }
        </div>
    );
};
// itemContainer.tsx
import { Item } from './Item';
import { IItems } from '../../data/Items/models/Item';
import { removeItem } from "../../data/Items/actions/initDashboardItems"
import { connect } from 'react-redux';


function mapStateToProps(state: any): any {
    return {
        items: state.items
    };
}


const mapDispatchToProps = (dispatch: any): any => {
    return {
        onClick: (id: any) => {
            alert(id);
        }
    };
};

export const ItemContainer = connect(
    mapStateToProps,
    mapDispatchToProps
)(Item);
// item.tsx
import * as React from 'react';
import { IItemSummary } from '../../data/items/models/item';

export const item = (props: IItemSummary) => {

    let outerDiv = {
            position: 'relative',
            borderBottom: 'solid #aeb0b5 1px',
            width: '650px'
        };

        let textDiv = {
            position: 'relative',
            width: '500px',
            padding: 5
        };

        let buttonDiv = {
            position: 'absolute',
            top: '5px',
            right: '10px',
            padding: 5
        };

    return (
        <div style={outerDiv}>
            <div style={textDiv}><strong>{props.title}</strong></div>
            <div style={textDiv}>{props.description}</div>
            <div style={buttonDiv}><button onClick={props.onClick}>Add Chart</button></div>
        </div>
    );
};

虽然我最终需要解决如何使用 React 和 Redux 将正确的功能连接到 onclick,但我还想知道为本文顶部描述的 UI 构建此代码的惯用 React Redux 方法是什么?

最佳答案

If I had a much deeper nesting this could become burdensome so I am attempting to find another way

您将尽可能多地传递 props(使用dumb组件),但在任何时候您都可以自由创建一个新的智能组件,该组件可以放置在任何地方(在dumb组件内或另一个智能组件内)。

关于reactjs - 在 react redux 中分派(dispatch)对子组件的操作的惯用方法,而无需一直传递 props,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37581309/

相关文章:

javascript - 在React中进行基于角色的路由时,使用switch语句并根据角色显示不同的组件是否存在安全问题?

reactjs - Material-UI ThemeProvider 没有将主题传递给组件

typescript - ngModel 自定义 ValuesAccessor

typescript - 安装@types/leaflet 后无法访问全局 L 命名空间

android - Nativescript ListView 仅显示一项

javascript - 如何使用 Flow 导出 Action 创建者返回值的类型?

javascript - 如何避免在需要 URI 更新时重新安装组件(例如过滤器按钮)?

javascript - React.js - 实现组件排序

css - 如何删除 material-ui 的可滚动选项卡中的额外空间?

javascript - 控制台(Google Chrome)上出现的操作 GET_FINGERPRINT 等是什么