ReactJS + Flux: Wie Datenattribut aus HTML übergeben?

Ich benutze ReactJS (Flux) und Laravel-Framework. Ich muss eine Variable von Blade-Vorlage zu React-Komponenten übergeben. Ich versuche, das Data-X-Attribut zu verwenden.ReactJS + Flux: Wie Datenattribut aus HTML übergeben?

Meine Frage sind ..

Wie kann ich die Daten erhalten in Reaktion (oder Flux Architektur)?
Haben Sie die beste Vorgehensweise, um die Daten in Flux zu speichern. Ist app.js der beste Ort dafür?

Danke,

index.blade.php

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>ReactJS</title> 
    </head> 
    <body> 
    <section id="react" data-domain="{{env("DOMAIN")}}"></section> 
    <script src="{{ elixir('js/bundle.js') }}"></script> 
    </body> 
</html>

/app.js

var React = require('react'); 
var SampleApp = require('./components/SampleApp.react'); 

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

/components/SampleApp.react

var React = require('react'); 
var SampleApp = React.createClass({ 
    render: function() { 
    return (
     <div> 
     Hello 
     </div> 
    ); 
    } 
}); 
module.exports = SampleApp;

================================================= ===

Edit 1

ich konnte Daten vorbei mit {this.props.domain}. Nächster Schritt ist, wie die Daten als Flux-Weg gespeichert werden.

/app.js

var React = require('react'); 
var SampleApp = require('./components/SampleApp.react'); 

var react = document.getElementById('react'); 

React.render(
    <SampleApp domain={react.dataset.domain}/>, 
    react 
);

/components/SampleApp.react

var React = require('react'); 
var SampleApp = React.createClass({ 
    render: function() { 
    return (
     <div> 
     Hello {this.props.domain} 
     </div> 
    ); 
    } 
}); 
module.exports = SampleApp;

====================== =============================

Edit 2

Fest

/index.blade.php 
/app.js 
/components/SampleApp.react.js 
/actions/SampleActionCreators.js 
/constans/SampleConstants.js 
/dispatcher/SampleAppDispatcher.js 
/stores/SampleStore.js

index.blade.php

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>ReactJS</title> 
    </head> 
    <body> 
    <section id="react" data-domain="test.example.com"></section> 
    <script src="{{ elixir('js/bundle.js') }}"></script> 
    </body> 
</html>

/app.js

var React = require('react'); 
var SampleApp = require('./components/SampleApp.react'); 

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

/components/SampleApp.react.js

var React = require('react'); 
var SampleActionCreators = require('../actions/SampleActionCreators'); 
var SampleStore = require('../stores/SampleStore'); 

function getSampleState() { 
    return { 
    domain: SampleStore.getDomain() 
    }; 
} 

var SampleApp = React.createClass({ 
    getInitialState: function() { 
    return getSampleState(); 
    }, 

    componentDidMount: function() { 
    SampleStore.addChangeListener(this._onChange); 

    var domain = document.querySelector('#react').dataset.domain; 
    SampleActionCreators.initData(domain); 
    }, 

    componentWillUnmount: function() { 
    SampleStore.removeChangeListener(this._onChange); 
    }, 

    render: function() { 
    return (
     <div> 
     Hello {this.state.domain} 
     </div> 
    ); 
    }, 

    _onChange: function() { 
    this.setState(getSampleState()); 
    } 

}); 
module.exports = SampleApp;

/actions/SampleActionCreators.js

var SampleAppDispatcher = require('../dispatcher/SampleAppDispatcher'); 
var SampleConstants = require('../constants/SampleConstants'); 

var ActionTypes = SampleConstants.ActionTypes; 

module.exports = { 

    initData: function(domain) { 
     SampleAppDispatcher.dispatch({ 
      type: ActionTypes.SAMPLE_INIT_DATA, 
      domain: domain 
     }); 
    }, 

};

/constans/SampleConstants.js

var keyMirror = require('keymirror'); 

module.exports = keyMirror({ 
    ActionTypes: keyMirror({ 
    SAMPLE_INIT_DATA: null 
    }) 
});

/dispatcher/SampleAppDispatcher.js

var Dispatcher = require('flux').Dispatcher; 

module.exports = new Dispatcher();

/Geschäfte/SampleStor.js

Quelle

2016-03-23 zono

'document.querySelector ('# reagieren'). Dataset.domain'. Nimm es in 'componentDidMount' und schicke es dann an Flux Store. – azium

Wenn Sie den 'flux' Weg speichern wollen - reduce, erstellen Sie einen Reducer mit der Domain im Ausgangszustand. – azium

Danke. Ich kann mir vorstellen, wie es geht. Ich werde es jetzt versuchen. Ich bin Anfänger in ReactJS. Ich habe sowohl Flux- als auch Redux-Tutorials ausprobiert, dann sehe ich, dass Flux leichter für mich zu starten (und zu verstehen) ist. Denkst du Redux ist jetzt besser? – zono

Ihre zweite Bearbeitung ist "korrekt" Flux Weise, die gleiche ich bei mehreren großen Projekten verwendet.

Ein einfacherer, alternativer Ansatz bestünde darin, die Domain in app.js abzurufen und sie als Prop an SampleApp zu übergeben. Dies erfordert, dass DOM von Ihrer Blade-Vorlage geladen wird, bevor JS ausgeführt wird. Da Sie Ihren JS bereits auf den Boden stellen, sollten Sie gut sein, aber ich habe window.onload Event hinzugefügt, nur um es sicher zu machen.

var React = require('react'); 
var SampleApp = require('./components/SampleApp.react'); 

function getDomain() { 
    return document.getElementById('react').dataset.domain; 
} 

function initReact() { 

    var params = { 
     domain: getDomain() 
    }; 

    React.render(
     <SampleApp {...params} />, 
     document.getElementById('react') 
    ); 

} 

window.onload = function() { 
    initReact(); 
};

Jetzt können Sie {this.props.domain} verwenden, um Ihren Domain-Wert in SampleApp.reatc.js Zugriff

Quelle

2016-03-23 11:15:27

Danke. Ich werde jetzt eins versuchen. – zono

ReactJS + Flux: Wie Datenattribut aus HTML übergeben?

Antwort

Verwandte Themen