Как я могу визуализировать HTML из другого файла в компоненте React?

Ответ 1

Если ваш файл template.html - это просто HTML, а не компонент React, тогда вы не можете требовать его так же, как и с JS файлом.

Однако, если вы используете Browserify - существует преобразование под названием stringify, которое позволит вам требовать не-js файлы в виде строк, После того, как вы добавили преобразование, вы сможете потребовать файлы HTML, и они будут экспортироваться, как если бы они были просто строками.

Как только вам понадобится HTML файл, вам нужно будет вставить строку HTML в свой компонент, используя dangerouslySetInnerHTML prop.

var __html = require('./template.html');
var template = { __html: __html };

React.module.exports = React.createClass({
  render: function() {
    return(
      <div dangerouslySetInnerHTML={template} />
    );
  }
});

Это противоречит многим тем, о чем говорит React. Было бы более естественно создавать ваши шаблоны как компоненты React с JSX, а не как обычные HTML файлы.

Синтаксис JSX позволяет легко выразить структурированные данные, например HTML, особенно если вы используете компоненты функции без состояния.

Если ваш файл template.html выглядел примерно так:

<div class='foo'>
  <h1>Hello</h1>
  <p>Some paragraph text</p>
  <button>Click</button>
</div>

Затем вы можете преобразовать его в JSX файл, похожий на этот.

module.exports = function(props) {
  return (
    <div className='foo'>
      <h1>Hello</h1>
      <p>Some paragraph text</p>
      <button>Click</button>
    </div>
  );
};

Затем вы можете потребовать и использовать его без необходимости строгать.

var Template = require('./template');

module.exports = React.createClass({
  render: function() {
    var bar = 'baz';
    return(
      <Template foo={bar}/>
    );
  }
});

Он поддерживает всю структуру исходного файла, но использует гибкость модели ретрансляции React и позволяет проводить синтаксическую проверку времени компиляции, в отличие от обычного HTML файла.

Ответ 2

Вы можете использовать свойство dangerouslySetInnerHTML для ввода произвольного 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>

Ответ 3

Вы можете сделать это, если шаблон является реагирующим компонентом.

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')
 );

И если вы используете Material-UI, для совместимости используйте компоненты Material-UI, никаких нормальных входов.

Ответ 4

Как правило, есть компоненты, которые представляют собой только рендеринг из реквизита. Вот так:

class Template extends React.Component{
  render (){
    return <div>this.props.something</div>
  }
}

Затем в вашем компоненте верхнего уровня, где у вас есть логика, вы просто импортируете компонент Template и передаете необходимые реквизиты. Вся ваша логика остается в компоненте более высокого уровня, и только шаблон отображает. Это возможный способ достижения "шаблонов", например, в Angular.

Нет никакого способа иметь файл .jsx только с jsx и использовать его в React, потому что jsx не является действительно html, а разметкой для виртуального DOM, который управляет React.