在react中渲染jsx组件列表

Question

我有一个列表，其中包含一些 jsx 组件，例如 components:

components = [
  <span className="c1 c2" onClick={() => console.log("test")}>...</span>,
  <span className="c1 c2" onClick={() => console.log("test")}>...</span>,
  <span className="c1 c2" onClick={() => console.log("test")}>...</span>,
]

顺便说一句，组件，是通过

push

放入数组中制成的：

for(...) {
  components.push(<span ...>...</span>)
}

我使用这个列表如下：

const MyList = () => {
  return (
    <p>{components}</p>
  )
}

问题是，渲染后，项目没有任何 onClick （或

onclick

事件处理程序）函数。 尽管它们具有

class

属性，并且

event

设置为

function noop() {}

。 浏览器检查器显示它们如下：

// there is no 'onclick' function
<span class="c1 c2">...</span>
...

我感谢任何帮助。

Answer 1

像

onClick

这样的事件处理程序仅在 React 渲染过程中创建和渲染元素时才起作用（如类组件中的“渲染”）。如果您在组件生命周期之外的数组中创建并存储 JSX 元素（如您的示例中所示），React 将无法正确地将事件处理程序附加到这些元素。

你应该这样做

const MyList = () => {
  // Define different functions
  const handleClick1 = () => console.log("Clicked item 1");
  const handleClick2 = () => console.log("Clicked item 2");
  const handleClick3 = () => console.log("Clicked item 3");

  // Array of data and corresponding event handlers
  const items = [
    { text: "Item 1", onClick: handleClick1 },
    { text: "Item 2", onClick: handleClick2 },
    { text: "Item 3", onClick: handleClick3 },
  ];

  return (
    <div>
      {items.map((item, index) => (
        <span
          key={index}
          className="c1 c2"
          onClick={item.onClick} // Assign specific onClick handler
        >
          {item.text}
        </span>
      ))}
    </div>
  );
};

export default MyList;