Esiste un modo corretto per trasferire i dati in un componente React dalla pagina HTML?

Ho un'applicazione React come questa.Esiste un modo corretto per trasferire i dati in un componente React dalla pagina HTML?

var X = React.createClass({ 
    componentDidMount: function() { 
    fetch(this.props.feed).then(...); 
    } 
    render: function() { 
    return <div>{this.props.feed}</div> 
    } 
});

Il puntello di alimentazione viene utilizzato per ottenere un feed JSON in componentDidMount che è unico per un particolare cliente.

Sarebbe conveniente per passare i dati nel mio Reagire app da HTML a parametrizzare esso:

<html> 
    <body> 
    <div id="app" feed='custom_feed.json'></div> 
    </body> 
</html

mia soluzione attuale assomiglia a questo:

var root = document.getElementById('app'); 
var feed = root.getAttribute('feed') 
ReactDOM.render(<X feed={feed}/>, root);

Questo funziona, ovviamente, ma ci si sente come dovrebbe esserci una soluzione più idiomatica. C'è un modo più React per fare questo?

fonte

2016-04-11 superluminary

Qual è lo scopo di questo caso d'uso? Se si tratta del rendering di modelli di "feed" nell'HTML, è sufficiente avere ReactDOM.render nel modello con il valore corretto. Usare i parametri DOM per avviare un'app React è molto insolito e non molto consigliato. Non penso che ci sia un modo semplice per farlo neanche. – Mijamo

Non sono pronto a convertire la mia app in una SPA. Il mio HTML è generato con uno script ruby. Il componente React è in realtà una parte piuttosto piccola di una pagina statica. In Angular potevo semplicemente inserire '' nella pagina. Ovviamente mi sto sbagliando. – superluminary

È venuto da Django, caso d'uso simile – binithb

ho usato data- attributi per vari oggetti di scena, poi superato tutti gli oggetti di scena utilizzando destrutturazione {...dataset}, ad esempio:

HTML:

<div id="app" data-feed='custom_feed.json' data-someprop='value'></div>

JS:

var root = document.getElementById('app'); 
ReactDOM.render(<X {...(root.dataset)} />, root);

Edit: demo fiddle

fonte

2016-04-11 10:03:26 pawel

Questo è bello, ma come è diverso da getAttribute? – superluminary

1. Gli attributi 'data-' sono pensati per essere usati a questo scopo invece di inventare attributi non validi, 2. Non devi digitare '.getAttribute' per ogni oggetto extra che vuoi passare, tutti sono nel 'dataset'. – pawel

Tuttavia, è possibile passare solo dati flat tramite 'set di dati'. Cosa succede se si deve passare all'intero array/oggetto? – jayarjo

Si può solo passare i dati durante il montaggio del componente in questo modo:

<div id="root"></div> 
<script> 
    const data = { foo: 'bar' }; 
    ReactDOM.render(
     React.createElement(MyComponent, data), 
     document.getElementById('root') 
    ); 
</script>

fonte

2016-12-19 08:42:10

Ho avuto un problema simile, pagine generate dinamicamente che contengono i dati rilevanti per la roba reagire.

ho appena dichiarato nell'ambito globale ..

<script> 
    window.foobles = [12,453,12]; 
    window.bahs = ["bah", "bah", "black sheep"]; 
</script>

.. poi ..

ReactDOM.render(
    <Component 
    foobles={window.foobles} 
    bahs={window.bah} 
    />, 
    document.getElementById('app') 
)

Ovviamente, dal punto di vista namespacing, questo può avere degli svantaggi :)

fonte

2017-08-18 05:36:50 Sp4cecat

React Habitat è un framework che facilita questo se si desidera qualcosa riutilizzabile ed estensibile.

Si registra Reagire componenti come questo

containerBuilder.register(Feed).as('Feed')

Poi definire obiettivi nel codice HTML in questo modo con i puntelli

<div data-component="Feed" data-prop-feed-src="/custom_feed.json">

Reagire Habitat sarà legare questi su in qualsiasi momento appare nel codice HTML.

Divulgazione: sono uno dei principali responsabili di questo framework.

fonte

2018-01-17 07:27:15 jennas

Esiste un modo corretto per trasferire i dati in un componente React dalla pagina HTML?

risposta

Problemi correlati