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.

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


functiongetHtml() {
  return (
    <divid="player"><aclassName="jp-play"style={this.state.playStyle}onClick={this.play}><iclassName="fa fa-play">Play</i></a><divclassName="jp-current-time">{this.state.currentTime.toString()}</div></div>
  );
}

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

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