如何在React中將點擊事件從父元素傳遞給子元素？ [ C ]

Question

單擊祖先標簽時，我希望使用window.open（）打開以下鏈接。

我知道道具很容易傳遞給孩子，但這無濟於事。

子元素如下所示：

import React from 'react';

class FramePageFaveTagFave extends React.Component {

  constructor(props) {
    super(props);
  }

  bookmarkClicked (url) {
    window.open(url, '_blank')
  }

  render () {
    let bm = this.props.bookmark;
    let tagClicked = this.props.tagClicked;

    return (
      <div className='bookmark_div' id={bm.id + 'a'} onClick={() => {this.bookmarkClicked(bm.url)}} >
        <img className='bookmark_image' id={bm.id + 'c'} src={'../_favicons/' + bm.favicon_local}/>
        <a className='bookmark_link' id={bm.id + 'b'} href={bm.url} target='_blank'
          onClick={()=>{e.preventDefault();}}>
          {bm.title}
        </a>
      </div>
    );
  }
}

export default FramePageFaveTagFave;

Answer 1

一個好的經驗法則是在進行此類工作時考慮回調。 父級可以傳遞一個名為onBookmarkClicked ，該onBookmarkClicked需要一個url 。 也許這樣：

onBookmarkCalled(url) {
   window.open(url, '_blank')
}

<ChildBookmark onBookMarkCalled={this.onBookmarkCalled} />

並且您可以在子級中執行完全相同的操作，除了代替this.bookmarkClicked您可以執行onClick={() => this.props.onBookmarkClicked(url)}