為什么單擊事件不適用於樣式化組件？

Question

我創建了一個樣式化的組件，我正在嘗試觸發事件處理程序，但沒有觸發。 如何處理樣式組件中的事件？ 這是我實現的相同功能的不同版本，它們都不起作用。

V1

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


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

const Div = ({ children, onClick }) => {
        return (
            <SomeDiv onClick={onClick}>{children}</SomeDiv>
        )
    }

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

V2

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

Answer 1

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