can you provide a syntactic sugar?

[zhangenming]

function Father() {
  const [state, setState] = useState(false)
  function toggle() {
    setState(!state)
  }
  return (
    <div>
      <button onClick={toggle}>Father</button>
      {state ? <Child func={toggle} /> : null}
    </div>
  )
}
function Child({ func }) {
  return (
    <div onClick={func}>
      <button>Child</button>
    </div>
  )
}

in this case, we just want bind the click event to the child root so, should there has a syntactic sugar like this?

// diff Father code
function Father() {
      {state ? <Child onClick={toggle} /> : null}
       //in Father compoent, Think like, we just immediate bind the click event at here
}

function Child() {
  return (
    <div class='root'> //  so  here , root node, we can omit 'onClick={func}'
      <button>child</button>
    </div>
  )
}

thanks

[yuanoook]

onClick is just a prop for a component; the component itself decides how to use the props.

For a dom node like <button>, onClick is a builtin prop, and will trigger when the dom is clicked; But for a composite component like <Child> here, onClick is just a normal prop, and the code inside should tell how to use it, when to call it.

Passing props cross components by syntactic sugar will make components very hard to manage and confusing.

[zhangenming]

but, in this particular case, that we just want bind the event to the root node we immediate bind the event on the parent node(Father) will be more clearer? and we cant provide a name , like react-click ( \ ) or whatever(reference https://github.com/facebook/jsx/issues/66)

function Father() {
      {state ? <Child onClick={toggle} /> : null}
}

function Child() {
  return (
    <div class='root'> //  so  here , at root node, we can omit 'onClick={func}'
      <button>child</button>
    </div>
  )
}

[nortonwong]

The Child must determine which node accepts click events. Suppose it renders a wrapper node that holds a primary button and other nodes. The outer node should not intercept the prop.

const Child = ({ onClick }) => (
  <div style={...}>
    <button onClick={onClick} />
    <button onClick={...} />
    <button onClick={...} />
  </div>
);

The Child should also be able to reject event handlers based on internal logic.

const Child = ({ onClick }) => {
  const [isBusy, setBusy] = useState(...);
  return <div onClick={isBusy ? undefined : onClick} />;
}