ReactJs 动态 html，绑定值到子类

Question

我正在尝试为音频播放器创建一个插件，用户可以在其中指定自己的可选 html。用户指定的 html 应该具有在播放器文件中定义的某些属性。

目前在插件中，render 方法看起来是这样的（为了简洁示例）：

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>
    );  

我不想在插件渲染 (player.js) 方法中对 JSX html 进行硬编码，而是这样做：

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，但将用户传递的 html 的值和事件绑定到我的 player.js 中的值和函数？我可以通过修改 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>