ReactJs Dynamic Html, Binding Values To The Child Class

I'm trying to create a plugin for an audio player where the user can specify their own optional html. The html that the user does specify should have certain properties that are de

Solution 1:

You can pass the function to generate the player elements in a prop. The important thing is that it has to be binded to the Player component instance before being called.

Here there is a working version of your code. Take into account that you are returning a JSX element inside getHtml, not pure HTML, so be sure to change class for className and so on.

Important: I hope you understand the security implications of what you are trying to do.

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>