如何呈現一個引導酥料餅

我試圖得到一個組件自舉酥料餅內使內部反應成分：如何呈現一個引導酥料餅

componentDidMount() { 
     $(this.refs.shareLink).popover({ 
      react: true, 
      title: "Share!", 
      content: <ShareLinkComponent lobbyid={this.props.lobbyid}/> 
     }) 
    } 
..... 
<td><a href="#"><i ref="shareLink" className="fa fa-share-square-o"></i></a></td> 
..... 


class ShareLinkComponent extends Component { 
    render() { 
     return (
      <div> 
       <p>Copy And Share</p> 
       <input type="text" value={`${window.location.host}/party/${this.props.lobbyid}`}/> 
      </div> 
     ) 
    } 
}

所以，我怎麼可能會做這項工作完全吻合。

來源

2016-01-04 Datsik

如果你正在逃離React世界進入jQuery-land，那麼你就不能使用JSX-- JSX不是HTML，它看起來就像它。

在一定JSX轉換成HTML字符串可以傳遞給jQuery的，你可以使用類似：

var html = ReactDOMServer.renderToStaticMarkup(
     <ShareLinkComponent lobbyid={this.props.lobbyid} /> 
    ); 
    $(this.refs.shareLink).popover({ 
     react: true, 
     title: "Share!", 
     content: html 
    })

不過，HTML是完全靜態的;在ShareLinkComponent內通常找不到的互動性可以正常工作。要做到這一點，您需要將生動的React組件渲染到DOM節點，然後將節點附加到疊加層。

如果可以，您可以查看基於React的解決方案，例如react-overlays（其中React Bootstrap uses）。

來源

2016-01-04 05:49:28

這會支持onClick事件嗎？我想這樣做，當我點擊共享彈窗內的輸入字段時，它會突出顯示文本。 – Datsik

@Datsik不，如前所述，使用最初的技術，從字面上來說，沒有任何基於React的編程交互性可以工作，因爲它會呈現爲靜態字符串。 –

由於性能和可維護性原因，請將您的代碼遷移至React-Bootstrap。這很簡單，將來會爲您節省很多頭痛。

來源

2016-01-04 12:20:54

如何呈現一個引導酥料餅

回答

相關問題