2014-11-24 21 views
6

Desidero aggiungere un componente di reazione, una funzione di commenti, a un sito non reattivo.Più istanze dello stesso componente di reazione

Il sito ha una pagina di notizie con scrolling infinito. Sotto ogni notiziario voglio includere il componente commenti di reazione. Ho intenzione di modellarlo dopo il tutorial FB qui: http://facebook.github.io/react/docs/tutorial.html

La mia domanda è, come faccio a montare dinamicamente ogni componente React su un elemento della storia DOM? Fondamentalmente, voglio avere molte istanze dello stesso componente commenti di reazione, ma con ogni istanza legata a una storia unica (div).

Penso di aver bisogno di rendere il componente di reazione sul lato server, dove posso impostare dinamicamente lo React.renderComponent. Qualsiasi suggerimento/esempio apprezzato.

+0

@jason_gelinas hai mai funzionato? Ho visto che ci sono conflitti di denominazione con più istanze su una pagina, ma il tuo caso d'uso è ottimo per SEO. – YPCrumble

risposta

8

Quando si aggiunge il palo è necessario avere i vostri dati e il nodo di destinazione dom (che chiameremo queste variabili data e el)

React.render(<MyComponent data={data} />, el); 

O senza JSX

React.render(React.createElement(MyComponent, {data: data}), el); 

Per pulire in alto:

React.unmountComponentAtNode(el); 

Per il lato server rendering si ca n do:

React.renderToString(React.createElement(MyComponent, {data: data})) 

e fintanto che il risultato di tale finisce come el sul client, è possibile montarlo con React.render come detto sopra.

+2

è OK montare elementi React come suggerisci più volte nello stesso DOM? Penso che sia esattamente ciò che la domanda pone in particolare: "Voglio avere molte istanze dello stesso componente di commenti, ma con ogni istanza legata a una storia unica (div)" – YPCrumble

+4

Sì, puoi avere centinaia di radici. – FakeRainBrigand

Problemi correlati