How should the component React, be designed? Be in a hurry.

now you need to make an embedded component SA, to capture user click behavior. About as follows

<SA name="6666">
    <h1></h1>
</SA>
when the user clicks H1, the console enters 666
requires that SA cannot return additional html, but can only return children,. That is to say, SA itself does not have a click event, but hijacks the click event of the number of children
//
function SA({children,name}){
    return children.map(child=>{
        
        let onNewClick=(e)=>{
            let onClick=child.onClick
            console.log(name)
            onClick&&onClick(e)
        }
        child.props.onClick=onNewClick
        return child
    })
}
< H2 > the above pseudo code is not good at all, just so that the viewer can understand it. Previously solved through React.cloneElement, at least the function can be performed, but caused other problems. Online and other solutions < / H2 >
Mar.17,2021

<SA name="6666">
  <h1></h1>
</SA>;

class SA extends Component {
  constructor(props) {
    super(props);
  }

  childClick() {
    console.log(666);
  }

  render() {
    const { children } = this.props;
    return <div onClick={this.childClick}>{children}</div>;
  }
}

// .

this is an event delegate. You can learn how to implement jquery

.
$('-sharpid').on('click', '.some-class', (e) => {
  // 
  // e.target.some-classdom
});

React.cloneElement will not trigger the redundant unmount/mount , React diff. The domTree generated by the same cloneElement parameter must be the same for Vitural DOM,. In fact, React.createElement can also achieve the same effect
https://codepen.io/ldz80/pen/.

clipboard.png

< hr >

events are tied to DOM , and even events bound on components end up being triggered on DOM . ( React indicates that events of Fragment may be supported in the future, but not yet).

therefore, in the case of not allowing the addition of DOM , this embedding behavior is essentially to invade the click event of children , that is, to modify the props

of children .

so I can only think of the cloneElement method. I don't know what's wrong with the title. If we bring it up for discussion, we may be able to solve the problem

.
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1bf220a-31de7.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1bf220a-31de7.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?