Javascript 为什么单击事件在样式化组件上不起作用？

我创建了一个样式化的组件，我正在尝试启动事件处理程序，但没有启动。如何处理样式化组件中的事件？这里是我实现的同一功能的不同版本，其中没有一个是有效的

V1

V2

---

V2对我来说很好。V1需要一些工作。这两个例子都有效：

const SomeDiv = styled.div`
  background: blue;
`;
export default function App() {
  const Div = ({ children, onClick }) => {
    return <SomeDiv onClick={() => onClick("testing")}>{children}</SomeDiv>;
  };
  function test(val) {
    console.log("I am");
    console.log(val);
  }
  return (
    <div className="App">
      <SomeDiv onClick={() => console.log("Hello")}>
        <span>Hello</span>
      </SomeDiv>
      <Div onClick={val => test(val)}>test</Div>
    </div>
  );
}

---

谢谢你的回复。让我再试一次。可能还有其他东西阻止触发器可能是因为被包装在另一个样式化组件中？不，这根本不是问题。看看我发布的一个有效的例子。请注意onClick上有一个arrow函数，以及我如何传入一个将由child div调用的函数。在您的示例中，您没有向child传入函数或使用arrow函数。下面是沙箱中的示例：。如果你把你的放在沙箱里，我会看一看。

import React, { useState } from 'react'
import styled from 'styled-components'


const SomeDiv = styled.div`
                padding: 16px;
                font-family: sans-serif;
                ...
`
export default function CustomDiv(){


return(
       <SomeDiv onClick={() => console.log('hi')}><span>Hello</span></SomeDiv>
)
}

const SomeDiv = styled.div`
  background: blue;
`;
export default function App() {
  const Div = ({ children, onClick }) => {
    return <SomeDiv onClick={() => onClick("testing")}>{children}</SomeDiv>;
  };
  function test(val) {
    console.log("I am");
    console.log(val);
  }
  return (
    <div className="App">
      <SomeDiv onClick={() => console.log("Hello")}>
        <span>Hello</span>
      </SomeDiv>
      <Div onClick={val => test(val)}>test</Div>
    </div>
  );
}