Initialize React Klasse/Komponente auf bestehenden Website mit Attributen

Question

Ich möchte eine Komponente auf einer Website mit React (Build mit Webpack) erstellen. Ich möchte keine komplizierte 'Installation' auf der bestehenden Website vornehmen. Fügen Sie einfach das Skript hinzu und es funktioniert.

Ich kann nicht herausfinden, wie Sie eine Komponente/Klasse erstellen und mit Parametern hinzufügen. Dieser Code initialisiert die Komponente auf der Seite, ignoriert jedoch messageText und initialCount. Ich habe auch versucht, ohne 'Daten-'

index.html

<div id="Docker" data-messageText="Test user" data-initialCount="2"/> 
<script src="assets/js/docker.js"></script> 

docker.jsx

var React = require('react'); 

var Docker = React.createClass({ 

    getInitialState: function() { 
     return { 
      count: parseInt(this.props.initialCount), 
      label: this.props.messageText 
     }; 
    }, 

    handleClick: function() { 
     this.setState({count: parseInt(this.state.count) + 1}); 
    }, 

    render: function() { 

     return (
      <div> 
      <div>Hello from: {this.state.label}</div> 
      <div onClick={this.handleClick}>{this.state.count}</div> 
      </div> 
     ); 
    } 

}); 

React.render(
    <Docker />, 
    document.getElementById('Docker') 
); 

Ein Wunsch ist es, die Komponente in einer beliebigen Webseite mit hinzuzufügen:

<Docker messageText="Test user" initialCount="2"/> 
<script src="assets/js/docker.js"></script> 

Answer 1

Sie müssen die Werte aus dem Div holen und sie an Ihre Docker-Komponente, wie diese

übergeben

var Docker = React.createClass({ 

    getInitialState: function() { 
     return { 
      count: parseInt(this.props.initialCount), 
      label: this.props.messageText 
     }; 
    }, 

    handleClick: function() { 
     this.setState({count: parseInt(this.state.count) + 1}); 
    }, 

    render: function() { 
     return (
      <div data-messageBox={this.state.label} data-initialCount={this.state.count}> 
      <div>Hello from: {this.state.label}</div> 
      <div onClick={this.handleClick}>{this.state.count}</div> 
      </div> 
      ); 
    } 

}); 

var docker = document.getElementById('Docker'); 
var messageText = docker.dataset.messagetext; 
var initialCount = docker.dataset.initialcount; 
ReactDOM.render(
    <Docker messageText={messageText} initialCount={initialCount}/>, 
    document.getElementById('Docker') 
); 

https://jsfiddle.net/69z2wepo/40824/