在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ React，這個(gè)組件應(yīng)該如何設(shè)計(jì)？急...

React，這個(gè)組件應(yīng)該如何設(shè)計(jì)？急...

現(xiàn)在需要做一個(gè)埋點(diǎn)組件SA,用于采集用戶點(diǎn)擊行為。大概如下

<SA name="6666">
    <h1>標(biāo)題</h1>
</SA>
當(dāng)用戶點(diǎn)擊 h1 時(shí)，控制臺(tái)輸入666
要求SA不能返回額外的html,只能返回children,也就是說SA本身沒有click事件，但是要劫持子元數(shù)的click事件
//大概偽代碼
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
    })
}

以上偽代碼，根本不行，只是讓看官能夠明白。之前通過React.cloneElement 解決了，至少功能能執(zhí)行，但是造成其他問題。在線等解決方案

回答
編輯回答
壞脾滊

React.cloneElement不會(huì)觸發(fā)多余的unmount/mount，React diff的是Vitural DOM，同樣的cloneElement參數(shù)生成的domTree一定是相同的。實(shí)際上，React.createElement也能實(shí)現(xiàn)同樣的效果
https://codepen.io/ldz80/pen/...

clipboard.png

事件是綁在DOM上的，即使是組件上綁定的事件最終都是要放到DOM上觸發(fā)的。（React表示未來可能支持Fragment的事件，但目前還沒有）。

因此在不允許增加DOM的情況下，這個(gè)埋點(diǎn)行為本質(zhì)上就是要入侵children的點(diǎn)擊事件，即修改children的props

如此一來我只能想到cloneElement的方法。不知題目說的有問題是什么情況？拿出來討論下，也許就能解決了

2017年10月30日 06:40
編輯回答
孤毒

你這是事件委托，可以了解下jquery怎么實(shí)現(xiàn)的

$('#id').on('click', '.some-class', (e) => {
  // 事件委托
  // e.target指向的就是.some-class對(duì)應(yīng)的dom
});
2018年3月12日 03:49
編輯回答
笨小蛋
<SA name="6666">
  <h1>標(biāo)題</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>;
  }
}

// 我理解就是一個(gè)插槽吧.不知是否理解正確
2018年7月10日 01:15