我目前正在学习如何使用 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.tsx
、ItemContainer.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/