Einstellung Reagieren Komponente Anfangs Requisiten bei der Verwendung von NPM & browserify

Ich React lernen und haben die Getting Started Anleitung zur Einrichtung npm, browserify, & babel gefolgt. Ich bin jetzt in der Lage, eine einzige bundle.js Datei aus meiner main.js Datei zu generieren, die ich in eine HTML-Seite aufnehmen kann, um meine reagierenden Komponenten zu rendern. So weit, ist es gut.Einstellung Reagieren Komponente Anfangs Requisiten bei der Verwendung von NPM & browserify

Was ich nicht herausfinden kann, ist, wie man Anfangswerte von der Datei index.html in die in bundle.js definierten Komponenten übergibt. Ich verstehe, dass dies ein Problem mit der Skalierbarkeit ist, da ReactDOM und die Komponenten nicht global sind.

Lassen Sie mich ein Beispiel geben. Say in bundle.js Ich habe eine React-Komponente namens Profile, die ein kleines Profil Widget für einen bestimmten Benutzernamen generiert. Ich möchte den Benutzernamen-Wert in main.js/bundle.js (wie es scheint, viele Beispiele tun) nicht fest codieren. Ich möchte, dass dies dynamisch ist und etwas, was ich in der HTML-Seite ändern kann. Also in meiner index.html Seite würde ich gerne so etwas wie die folgenden Funktionen ausführen:

<body> 
    <div id="profile"></div> 
    <script src="bundle.js"></script> 
    <script> 
     ReactDOM.render(
      <Profile user="bob" />, 
      document.getElementById('profile') 
     ); 
    </script> 
</body>

Das funktioniert nicht, natürlich, aber hoffentlich zeigt, was ich möchte zu erreichen. Kennt jemand ein Muster, um so etwas zu tun? Vielen Dank.

Quelle

2016-04-05 chris

In diesem Fall müssen Sie Javascript verwenden, um Elemente zu erstellen, nicht JSX.

Da Webpack React/ReactDOM bündelt, können Sie nicht global darauf zugreifen. Um dies zu vermeiden, installieren Sie expose-loader für Webpack. https://www.npmjs.com/package/expose-loader

// index.js may look like this then 
require("expose?React!react"); 
require("expose?ReactDOM!react-dom"); 
require("expose?Profile!./Profile"); 
// ./Profile is Profile.js containing component code

Quelle

2016-04-05 08:23:36 Andreyco

Ich habe versucht, dies, aber einen JavaScript-Fehler erhalten, dass 'ReactDOM' nicht definiert ist. Es scheint, dass mein 'bundle.js' seine Variablen lokal hält. Wäre es nicht ratsam, 'ReactDOM' und meine Komponenten explizit auf globale Variablen zu setzen? z. B. 'window.React = require ('react');', 'window.MyComponent = React.createClass ({...});' – chris

Siehe aktualisierte Antwort – Andreyco

Sie das Attribut user auf dem DOM-Element zugreifen können und dass Komponente passieren,

hier ist ein Beispiel ohne jsx:

const profEl= document.getElementById('profile') 

const Profile = React.createClass({ 
    displayName: 'Profile', 
    render: function() { 
    return (
     React.createElement('div', { 
      className: "prof" 
     }, 
     profEl.attributes.user.value , ' is the name' 
    ) 
    ); 
    } 
}); 
ReactDOM.render(
    React.createElement(Profile, null), 
    profEl 
);

fiddle

Quelle

2016-04-05 08:52:50 maioman

Einstellung Reagieren Komponente Anfangs Requisiten bei der Verwendung von NPM & browserify

Antwort

Verwandte Themen