ant design Tree 自定義title

根據官方文檔，TreeNode 的title可以是字符串也可以是ReactNode。
根據需求，需要在后面添加兩個復選框來表示編輯和只讀權限。以為只是很簡單的將 title 改為ReactNode即可。但是復選框選擇時，遇到問題，就是不好使。
究其原因：事件冒泡，點擊復選框是同時出發了 title 的點擊選中事件(selectable 屬性)，如果將屬性設置為false，則點擊就會選中前面的復選框。

因此只需要在復選框的外層添加 click 事件，並阻止冒泡即可。

  const options = [
    { label: 'Apple', value: 'Apple' },
    { label: 'Pear', value: 'Pear' },
    { label: 'Orange', value: 'Orange' },
  ];

  // 自定義title
  const rendertitle = () => (
    <div style={{ display: 'flex' }} onClick={e => e.stopPropagation()}>
      自定義title
      <div style={{ marginLeft: 20 }}>
        <Checkbox.Group options={options} onChange={e => onChange(e)} />
      </div>
    </div>
  )