ReactJS：从 data-reactid 属性轻松访问状态对象？

Question

我正在开发我的第一个 react 应用程序。我注意到对元素有贡献的状态偶尔会反映在 reactid 中。也许这是传递的钥匙？ 我找不到很多关于 reactid 的文档，但我想知道是否有一种隔离这些键的好方法。

例如，我要更新的元素的 ID 为：.0.1.0.1.$4.3:$level.1 $ 代表我用来构建该 DOM 节点的状态对象的已知索引。 （具体来说就是this.state.figures[4].level这个对象）

如果我能用预定义的方法解析出这些 $ 值，那将是非常棒的，以便于 setState。有这种事吗？

这是我试图在顶级祖先定义的事件上设置状态以避免繁琐的双向事件处理。我的方法真的很愚蠢吗？

Answer 1

如果我理解正确，您希望根据它们的data-reactid 将事件绑定到 DOM 节点？

如果是这样 - 我认为这根本不是一个明智的想法。 data-reactid 属性是暂时的，它会在没有警告的情况下发生变化，并受到 React 生态系统中的许多事件的影响。

我喜欢将 React 生成的 DOM 视为编译目标，我根本不应该与之交互。一个黑匣子，如果你愿意的话。

如果您需要帮助解决事件问题，您可能需要自行描述。

编辑

您可以在 React 中添加事件处理程序，这些处理程序知道它们在迭代器中的位置，并知道组件的当前状态。

<div>
  {
    things.map((thing, index) => {
      return (
        <li
          className="level"
          key={`level_${index}`}
          onClick={this.handleClick.bind(this, thing)}>
          { thing }
        </li>
      );
    });
  }
</div>

所以handleClick 会在单击时收到thing 项目，它可以为您提供有关该特定事物的信息。你也可以通过索引。在handleClick 中，您还可以访问this.state。