Question

我有两个React组件 - MyMenu和MyMenuItem。 MyMenu对应于我的状态中的项目列表（使用Redux将更改传播到项目或列表）。 MyMenuItem应该从该列表中呈现特定项目...因此MyMenu需要将标识符传递给MyMenuItem，以便它知道要呈现的项目。

例如，MyMenu中的渲染函数大致如下：

  const menu_items = [];
  items.forEach(function(item)
    { menu_items.push(<MyMenuItem item_id={item.id} /> }
  return (<div><ul> {menu_items} </ul><div>);

MyMenuItem组件如下所示：

const MyMenuItem = ({app_state}) =>
    {
    let id = item_id;
    let link = "/testresult/" + id;
    let name = app_state.items[id].name;

    return ( <li key={id}><Link href={link}>{name}</Link> </li> );
    };

要声明所需的item_id参数，它将具有：

MyMenuItem.propTypes =
    { item_id: React.PropTypes.string.isRequired };

要从Redux商店连接到应用程序状态，它会有类似的内容：

export default connect(state =>
    ({ app_state: state.AppState }))(MyMenuItem);

在上面的示例中，item_id将是未定义的。我无法弄清楚如何访问参数，或者特别是传递给组件的item_id参数。提前谢谢！

Answer 1

问题是您正在“连接”过于细化的组件。当然，您可以连接任何您想要的组件，但考虑“连接”外部组件，如“页面”。

在您的具体情况下，如果您“连接”MyMenu，则不会出现您所描述的问题。

这样的事情：

const menu_items = [];
  app_state.items.forEach(function(item)
    { menu_items.push(<MyMenuItem item={item} /> }
  return (<div><ul> {menu_items} </ul><div>);

请注意，上述内容可以替换为：

return <div><ul>
{ app_state.items.map((item, index) => <MyMenuItem item={item} key={index}} />
</ul></div>;

现在你的MyMenuItem会是这样的：

const MyMenuItem = ({item}) =>
    {
    let id = item.id;
    let link = "/testresult/" + id;
    let name = item.name;

    return ( <li key={id}><Link href={link}>{name}</Link> </li> );
    };

回答您的原始问题

Redux的connect创建一个HOC（另一个组件，它是原始组件的包装），它使用mapStateToProps函数自动将道具绑定到状态。

我可以通过“connect”将其他道具传递给HOC组件吗？

是的，但我很确定你必须传递mergeProps论据。看看connect documentation。第三个参数是一个函数，如：

mergeProps(stateProps, dispatchProps, ownProps) { /* return resulting props */ }

这个函数显然应该从mapStateToProps，mapDispatchToProps和组件自己的道具返回对象并返回一个结果对象，哪些字段将是connected的道具成分

这是最佳做法吗？

我确信这有合理的使用案例，但我一生中从未需要这样做。人们通常做的是connect只有外部组件或组件，如页面组件。如果您有某种“母版页”，则可以连接应用标题和每个页面的“母版页”。

Redux背后的理念是，如果您需要更改页面中的任何内容，您应该触发更改全局存储的操作，然后重新呈现连接的组件。当然，有一些优化可以防止不必要的重新渲染。

如何使用React和Redux访问标记属性（params）？

1 个答案:

回答您的原始问题