Czy istnieje właściwy sposób przekazywania danych do komponentu React ze strony HTML?

Mam aplikację React w ten sposób.Czy istnieje właściwy sposób przekazywania danych do komponentu React ze strony HTML?

Podprzykład podajnika służy do uzyskania kanału JSON w składniku componentDidMount, który jest unikalny dla konkretnego klienta.

byłoby wygodne, aby przekazać dane do mojego React aplikacji z HTML parametryzacji go:

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

Moje obecne rozwiązanie wygląda tak:

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

To oczywiście działa, ale to uczucie tak, jak powinno być bardziej idiomatyczne rozwiązanie. Czy istnieje sposób React?

Źródło

2016-04-11 superluminary

Jaki jest cel tego zastosowania? Jeśli jest to renderowanie szablonu "kanału" w kodzie HTML, możesz po prostu mieć ReactDOM.render w swoim szablonie z odpowiednią wartością. Używanie parametrów DOM do inicjowania aplikacji React jest bardzo nietypowe i niezbyt zalecane. Nie sądzę, żeby było to łatwe. – Mijamo

Nie jestem gotowy, aby przekonwertować moją aplikację na SPA. Mój HTML jest generowany za pomocą skryptu ruby. Komponent React to właściwie niewielka część statycznej strony. W Angular mogę po prostu upuścić '' na stronę. Najwyraźniej nie mam nic przeciwko temu. – superluminary

Przyszedłem tutaj z Django, podobny przypadek użycia – binithb

Użyłem data- atrybuty dla różnych rekwizytów, następnie przeszedł wszystkie rekwizyty używając demontażu struktury {...dataset}, na przykład:

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

Źródło

2016-04-11 10:03:26 pawel

To jest miłe, ale jak to się różni od getAttribute? – superluminary

1. Atrybuty "data-" są przeznaczone do tego celu zamiast wymyślania nieprawidłowych atrybutów, 2. Nie musisz wpisywać '.getAttribute' dla każdego dodatkowego wniosku, który chcesz przekazać, wszystkie są w 'dataset'. – pawel

Ale wtedy można przekazywać tylko płaskie dane za pomocą 'dataset'. Co jeśli trzeba przejść przez całą tablicę/obiekt? – jayarjo

Możesz po prostu przekazać swoje dane podczas montażu komponentu w następujący sposób:

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

Źródło

2016-12-19 08:42:10

Miałem podobny problem, dynamicznie generowane strony, które zawierają dane związane z materiałem React.

Właśnie ogłosił je w zasięgu globalnym ..

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

.. THEN ..

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

Oczywiście, z punktu widzenia przestrzeni nazw, to może mieć pewne wady :)

Źródło

2017-08-18 05:36:50 Sp4cecat

React Habitat to framework, który ułatwia to, jeśli chcesz coś wielokrotnego użytku i rozszerzenie.

zarejestrować React komponentów jak ten

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

Następnie zdefiniować cele w HTML tak z rekwizytami

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

React Habitat będzie podłączyć je w dowolnym czasie to pojawia się w kodzie HTML.

Ujawnienie: Jestem jednym z głównych opiekunów tego systemu.

Źródło

2018-01-17 07:27:15 jennas

Czy istnieje właściwy sposób przekazywania danych do komponentu React ze strony HTML?

Odpowiedz

Powiązane problemy