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

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

例如，MyMenu中的render函数大致如下所示：

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

要从Redux应用商店连接到应用程序状态，它将具有以下内容：

export default connect(state =>
    ({ app_state: state.AppState }))(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> );
    };

---

在上面的示例中，项_id将是未定义的。我搞不清楚的是如何访问参数，特别是传递给组件的item_id参数。提前谢谢

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

在您的特定情况下，如果您“连接”了

MyMenu

，就不会出现您描述的问题

大概是这样的：

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

回答你原来的问题 Redux的

connect

创建一个HOC（作为原始组件包装的另一个组件），使用

mapstateTrops

函数自动将道具绑定到状态

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

是的，但是我非常确定您必须为此传递

mergeProps

参数。请看下面的图片。第三个参数是一个函数，类似于：

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

显然，该函数应该获取从

mapStateToProps

、

mapDispatchToProps

和组件自身的props返回的对象，并返回一个结果对象，该对象的字段将是连接的

组件的props

这是最佳做法吗？

我肯定有合法的使用案例，但我从来没有在我的生活中需要这个。人们通常只连接外部组件，比如页面组件。如果你有某种“母版页”，你可以连接应用程序标题和每个单独页面的“母版页”

Redux背后的理念是，如果您需要更改页面中的任何内容，您应该触发更改全局存储的操作，进而重新呈现连接的组件。当然，有一些优化可以防止不必要的重播。
谢谢，@andrerpena！你的例子让我意识到我是在错误的假设下工作的。因为JSX格式看起来像HTML，所以我用这种格式思考，并假设我不能传递整个对象——只能传递可以表示为简单字符串的值。一旦我忘记了这一点，你的建议就解决了我眼前的问题。但对于最初的问题——如何访问redux存储/状态（通过connect）和道具（从父级传递）——这可能吗？（没有一些丑陋的黑客）。这会是一种反模式吗？@CMerrill，我很高兴能帮上忙。我已经更新了答案，试图回答你的问题。
return <div><ul>
{ app_state.items.map((item, index) => <MyMenuItem item={item} key={index}} />
</ul></div>;

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> );
    };

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