Porównaj ceny domen i usług IT, sprzedawców z całego świata

Jak mogę renderować HTML z innego pliku w komponencie React?


Czy można wyprowadzić HTML z innego pliku w komponencie React?
Próbowałem następujących rzeczy, ale to nie działa:
var React = require('react');/* Template html */
var template = require('./template');module.exports = React.createClass({
render: function() {
return( <template/>
);
}
});

Zaproszony:
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Jeśli twój plik
template.html
to tylko HTML, a nie komponent Reacta, nie możesz wymagać tego tak samo, jak w przypadku pliku JS.
Jeśli jednak używasz Browserify - istnieje transformacja o nazwie

stringify
https://github.com/JohnPostlethwait/stringify
co pozwoli ci wymagać plików innych niż js jako łańcuchów. Po dodaniu transformacji możesz wymagać plików HTML i zostaną one wyeksportowane tak, jakby były tylko ciągami.
Gdy będziesz potrzebować pliku HTML, będziesz musiał wstrzyknąć ciąg HTML do swojego komponentu za pomocą
dangerouslySetInnerHTML
prop
https://reactjs.org/docs/dom-e ... rhtml
.
var __html = require('./template.html');
var template = { __html: __html };React.module.exports = React.createClass({
render: function() {
return( <div dangerouslySetInnerHTML={template}/>
);
}
});

Jednak jest to sprzeczne z wieloma tym, co dzieje się w React. Byłoby bardziej naturalne zaprojektowanie szablonów jako komponentów Reacta z JSX niż zwykłymi plikami HTML.
Składnia JSX sprawia, że ​​wyrażanie ustrukturyzowanych danych, takich jak HTML, jest banalnie łatwe, zwłaszcza w przypadku używania

komponenty funkcyjne
https://facebook.github.io/rea ... nents
bezpaństwowiec.
Jeśli Twój plik
template.html
wyglądał mniej więcej tak
<div class='foo'>
[b]Hello[/b]>
Some paragraph text <button>Click</button>

Następnie możesz przekonwertować go na plik JSX, który wyglądał tak.
module.exports = function(props) {
return ( <div className='foo'>
[b]Hello[/b]>
Some paragraph text <button>Click</button>

);
};

Następnie możesz zgłosić i używać go bez potrzeby stringify.
var Template = require('./template');module.exports = React.createClass({
render: function() {
var bar = 'baz';
return( <Template foo={bar}/>
);
}
});

Obsługuje całą strukturę pliku źródłowego, ale wykorzystuje elastyczność modelu właściwości Reacta i pozwala na sprawdzanie składni w czasie kompilacji, w przeciwieństwie do zwykłego pliku HTML.
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

własność
dangerouslySetInnerHTML
https://facebook.github.io/rea ... .html
można użyć do wstrzyknięcia dowolnego HTML:
<div class="snippet-code">
<div class="snippet" data-hide="false" data-lang="js">
<pre class="snippet-code-js lang-js prettyprint-override">
// Assume from another require()'ed module:
var html = '[b]Hello, world![/b]>'var MyComponent = React.createClass({
render: function() {
return React.createElement("h1", {dangerouslySetInnerHTML: {__html: html}})
}
})ReactDOM.render(React.createElement(MyComponent), document.getElementById('app'))

<pre class="snippet-code-html lang-html prettyprint-override">
<script src="[url=https://fb.me/react-0.14.3.min.js"></script>]https://fb.me/react-0.14.3.min ... gt%3B[/url]
<script src="[url=https://fb.me/react-dom-0.14.3.min.js"></script>]https://fb.me/react-dom-0.14.3 ... gt%3B[/url]
<div id="app">

Możesz nawet zastosować podejście oparte na komponentach do tego wzorca zachowania (nieprzetestowane):
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'/>

A z tym
template.html
(w tym samym katalogu) wygląda mniej więcej tak (ponownie, nieprzetestowane):
// ./template.html
module.exports = '[b]Hello, world![/b]>'
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Zwykle istnieją komponenty, które są renderowane tylko z właściwości. Podobne do tego:
class Template extends React.Component{
render (){
return <div>this.props.something
}
}

Następnie w komponencie najwyższego poziomu, w którym masz swoją logikę, po prostu importujesz komponent szablonu i przekazujesz wymagane właściwości. Cała Twoja logika pozostaje w komponencie wyższego poziomu, a szablon jest renderowany tylko. Jest to możliwy sposób na osiągnięcie „szablonów”, tak jak w Angular.
Nie ma sposobu, aby mieć plik .jsx zawierający tylko jsx i użyć go w Reakcie, ponieważ jsx nie jest tak naprawdę HTML, ale znacznikiem dla wirtualnego DOM, którym zarządza React.
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Możesz to zrobić, jeśli szablon jest komponentem reagowania.

Template.js

var React = require('react');var Template = React.createClass({
render: function(){
return (<div>Mi HTML);
}
});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:
//[url=https://github.com/zilverline/react-tap-event-plugin]https://github.com/zilverline/ ... lugin[/url]
injectTapEventPlugin();var MainComponent = React.createClass({
render: function() {
return( <Template/>
);
}
});// Render the main app react component into the app div.
// For more details see: [url=https://facebook.github.io/react/docs/top-level-api.html#react.render]https://facebook.github.io/rea ... ender[/url]
ReactDOM.render( <MainComponent/>,
document.getElementById('app')
);

A jeśli używasz Material-UI, Material-UI Component Compatibility, nie ma normalnych danych wejściowych.
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

W tym celu możesz użyć niebezpiecznie SetInnerHTML:
import React from 'react';
function iframe() {
return {
__html: '<iframe src="./Folder/File.html" width="540" height="450"></iframe>'
}
}
export default function Exercises() {
return ( <div>
<div dangerouslySetInnerHTML={iframe()}/>
)
}

Pliki HTML powinny być w formacie

generał

teczka

Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się