ReactJs動態html，綁定到子類的值

Question

我試圖爲音頻播放器創建一個插件，用戶可以在其中指定自己的可選html。用戶指定的html應該具有在播放器文件中定義的某些屬性。

在插件的那一刻，渲染方法看起來是這樣的（削減簡潔爲例）：

player.js：

render(){ 
    return (
     <div id="player"> 
      <a class="jp-play" style={this.state.playStyle} onClick={this.play}> 
       <i class="fa fa-play"></i> 
      </a> 
      <div class="jp-current-time">{this.state.currentTime}</div> 
     </div> 
    ); 

而不是在渲染插件硬編碼的HTML JSX的（ player.js）方法我想要做這樣的事情：

render(){ 
    return (
     {this.props.playerHtml} 
    ); 

在父稱這就像這樣：

個

app.js：

render(
    <Player playerHtml={getHtml()} /> 
, document.getElementById("app")); 

function getHtml(){ 
    <div id="player"> 
     <a class="jp-play" style={this.state.playStyle} onClick={this.play}> 
      <i class="fa fa-play"></i> 
     </a> 
     <div class="jp-current-time">{this.state.currentTime}</div> 
    </div> 
} 

因此，用戶可以指定插件自己的HTML。這種方式通過在jp-play內傳遞fa-play圖標，他們可以通過他們想要的任何東西。

的問題是onClick事件處理程序，並通過各州通過將不再作爲this.state.playStyle正常工作和this.state.currentTime將指向app.js文件，而不是player.js。

我問題是，我該如何讓用戶提供自己的HTML這樣的，但在綁定我player.js的HTML的用戶通行證價值和功能價值和事件？我可以通過修改dom來輕鬆完成，但我不認爲這是反應方式。

Answer 1

您可以通過該函數在道具中生成玩家元素。重要的是在被調用之前必須綁定到Player組件實例。

這裏有一個工作版本的代碼。考慮到您在getHtml之內返回JSX元素，而不是純HTML，因此請務必將class更改爲className等等。

重要提示：我希望您瞭解您正在嘗試執行的安全隱患。

class Player extends React.Component { 
 
    constructor(props) { 
 
    super(); 
 
    this.state = { 
 
     playStyle: { background: 'red' }, 
 
     currentTime: new Date() 
 
    } 
 
    } 
 
    
 
    render() { 
 
    return (
 
     <div> 
 
     Player: 
 
     { this.props.playerHtml.bind(this)() } 
 
     </div> 
 
    ); 
 
    } 
 
}; 
 

 

 
function getHtml() { 
 
    return (
 
    <div id="player"> 
 
     <a className="jp-play" style={this.state.playStyle} onClick={this.play}> 
 
      <i className="fa fa-play">Play</i> 
 
     </a> 
 
     <div className="jp-current-time">{this.state.currentTime.toString()}</div> 
 
    </div> 
 
); 
 
} 
 

 
ReactDOM.render(
 
    <Player playerHtml={getHtml} /> 
 
    , document.getElementById("app") 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id="app"></div>