È possibile eseguire il rendering HTML da un altro file in un componente React?Come posso eseguire il rendering HTML da un altro file in un componente React?
ho provato quanto segue, ma non funziona:
var React = require('react');
/* Template html */
var template = require('./template');
module.exports = React.createClass({
render: function() {
return(
<template/>
);
}
});
E 'comune avere componenti che sono solo il rendering da oggetti di scena. Come questo:
class Template extends React.Component{
render(){
return <div>this.props.something</div>
}
}
Poi nel componente piano superiore dove si ha la logica appena importare il componente modello e passare gli oggetti di scena necessari. Tutta la tua logica rimane nel componente di livello superiore e il modello esegue solo rendering. Questo è un modo possibile per ottenere "modelli" come in Angolare.
Non c'è modo di avere il file .jsx con jsx e usarlo in React perché jsx non è in realtà html ma markup per un DOM virtuale, gestito da React.
Serbatoi per la tua risposta. Ma quando usi una grande pagina html, questo metodo avrà varie linee in un file jsx. Non posso creare un file jsx per ogni richiesta. –
Non è necessario disporre di un file jsx per ogni riga/blocco. Quando si lavora con React, l'app viene divisa in componenti logici in base ai dati utilizzati da ciascun componente e, utilizzando questa logica, si organizzano i componenti. Ad esempio è possibile avere un componente che recupera i dati degli utenti dal server. Diciamo che si chiama UsersData. Quindi hai un componente per l'utente, chiamato UserData. E infine componente che rende alcuni dati, ad esempio Biografia. Quindi l'ordine è: UsersData -> UserData -> Biography. La componente della biografia può avere campi come il luogo di nascita e l'età. – Ivan
È possibile utilizzare la proprietà dangerouslySetInnerHTML per iniettare arbitrario HTML:
// Assume from another require()'ed module:
var html = '<h1>Hello, world!</h1>'
var MyComponent = React.createClass({
render: function() {
return React.createElement("h1", {dangerouslySetInnerHTML: {__html: html}})
}
})
ReactDOM.render(React.createElement(MyComponent), document.getElementById('app'))<script src="https://fb.me/react-0.14.3.min.js"></script>
<script src="https://fb.me/react-dom-0.14.3.min.js"></script>
<div id="app"></div>Si potrebbe anche componentize questo comportamento modello (non testata):
class TemplateComponent extends React.Component {
constructor(props) {
super(props)
this.html = require(props.template)
}
render() {
return <div dangerouslySetInnerHTML={{__html: this.html}}/>
}
}
TemplateComponent.propTypes = {
template: React.PropTypes.string.isRequired
}
// use like
<TemplateComponent template='./template.html'/>
E con questo, template.html (nella stessa directory) sembra qualcosa di simile (ancora, non testato):
// ./template.html
module.exports = '<h1>Hello, world!</h1>'
Grazie per la risposta. Ottengo questo errore: Errore non rilevato: impossibile trovare il modulo 'template.html'. –
Dovrai fornire un percorso corretto per il tuo modello. Ho aggiornato la mia risposta per mostrare se 'template.html' si trova nella stessa directory. –
Se il file template.html è solo HTML e non un componente Reagire, allora non si può richiedere che nello stesso modo si farebbe con un file JS.
Tuttavia, se si utilizza Browserify, è disponibile una trasformazione denominata stringify che consente di richiedere file non js come stringhe. Una volta aggiunta la trasformazione, sarà possibile richiedere i file HTML e verranno esportati come se fossero solo stringhe.
Una volta richiesto il file HTML, sarà necessario inserire la stringa HTML nel componente, utilizzando dangerouslySetInnerHTML prop.
var __html = require('./template.html');
var template = { __html: __html };
React.module.exports = React.createClass({
render: function() {
return(
<div dangerouslySetInnerHTML={template} />
);
}
});
Questo va contro molto di ciò che riguarda React. Sarebbe più naturale creare i tuoi modelli come componenti React con JSX, piuttosto che come normali file HTML.
La sintassi JSX rende banalmente facile esprimere dati strutturati, come HTML, soprattutto quando si utilizza stateless function components.
Se il file template.html sembrava qualcosa di simile
<div class='foo'>
<h1>Hello</h1>
<p>Some paragraph text</p>
<button>Click</button>
</div>
Poi si potrebbe convertire invece in un file JSX che si presentava così.
module.exports = function(props) {
return (
<div className='foo'>
<h1>Hello</h1>
<p>Some paragraph text</p>
<button>Click</button>
</div>
);
};
Quindi è possibile richiedere e utilizzare senza stringificare.
var Template = require('./template');
module.exports = React.createClass({
render: function() {
var bar = 'baz';
return(
<Template foo={bar}/>
);
}
});
Si mantiene tutta la struttura del file originale, ma sfrutta la flessibilità del modello di Reagire oggetti di scena e consente una compilazione controllo della sintassi di tempo, a differenza di un normale file HTML.
Funziona, ma non funziona con materiale-ui. Il mio file html contiene TextField e non renderizza –
Spiacente, non sto seguendo. Quale approccio hai provato? C'è un errore? Forse sarebbe utile includere il tuo file html nella tua domanda. –
È possibile farlo se il modello è un componente di reazione.
Template.js
var React = require('react');
var Template = React.createClass({
render: function(){
return (<div>Mi HTML</div>);
}
});
module.exports = Template;
MainComponent.js
var React = require('react');
var ReactDOM = require('react-dom');
var injectTapEventPlugin = require("react-tap-event-plugin");
var Template = require('./Template');
//Needed for React Developer Tools
window.React = React;
//Needed for onTouchTap
//Can go away when react 1.0 release
//Check this repo:
//https://github.com/zilverline/react-tap-event-plugin
injectTapEventPlugin();
var MainComponent = React.createClass({
render: function() {
return(
<Template/>
);
}
});
// Render the main app react component into the app div.
// For more details see: https://facebook.github.io/react/docs/top-level-api.html#react.render
ReactDOM.render(
<MainComponent />,
document.getElementById('app')
);
E se si utilizza materiale-UI, per l'uso Compatibilità con i materiali-componenti UI, senza ingressi normali.
È necessario utilizzare la lettera maiuscola per i componenti personalizzati, quindi rinominare 'template' in' Template' e quindi restituirlo come '' – Icepickle
Suppongo che quando si dice "HTML", si intende realmente JSX? –
@Icepickle ottengo questo errore: errore non rilevato: Impossibile trovare il modulo "./template" –