리액트 컴포넌트의 다른 파일에서 HTML을 렌더링하려면 어떻게 해야 합니까?

리액트 컴포넌트의 다른 파일에서 HTML을 렌더링하려면 어떻게 해야 합니까?

리액트 컴포넌트의 다른 파일에서 HTML을 렌더링할 수 있습니까?

다음을 시도했지만 작동하지 않습니다.

var React = require('react');

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

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

의 '' ''가template.html파일은 HTML일 뿐 React 컴포넌트가 아니기 때문에 JS 파일과 같은 방법으로 요구할 수 없습니다.

다만, Browserify 를 사용하고 있는 경우는, stringify 라고 하는 변환이 있습니다.이 변환에서는, js 이외의 파일을 문자열로서 요구할 수 있습니다.변환을 추가하면 HTML 파일이 필요할 수 있으며 HTML 파일은 문자열처럼 내보냅니다.

HTML 파일이 필요하게 되면 소품을 사용하여 HTML 문자열을 컴포넌트에 삽입해야 합니다.

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

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

이것은 React에 관한 많은 것에 반하는 것입니다.템플릿을 일반 HTML 파일이 아닌 JSX를 사용하여 React 구성 요소로 작성하는 것이 더 자연스러울 것입니다.

특히 상태 비저장 함수 구성 요소를 사용할 경우 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 파일과 달리 컴파일 시간 구문 검사를 할 수 있습니다.

속성을 사용하여 임의의 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>

이 템플릿 동작(테스트되지 않음)을 컴포넌트화할 수도 있습니다.

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'/>

이걸로 ★★★★★★★★★★★★★★★★★★★★★★★」template.html디렉토리에 같이 . ( 되지 않음).

// ./template.html
module.exports = '<h1>Hello, world!</h1>'

위험하게 SetInner를 사용할 수 있습니다.이를 위한 HTML:

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()} />
        </div>)
}

HTML 파일은 공용 폴더에 있어야 합니다.

일반적으로 소품에서만 렌더링하는 컴포넌트가 있습니다.다음과 같이 합니다.

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

그런 다음 로직이 있는 상위 레벨 컴포넌트에서 템플릿 컴포넌트를 Import하여 필요한 소품을 전달하기만 하면 됩니다.모든 논리는 상위 레벨의 컴포넌트로 유지되며 템플릿은 렌더링만 합니다.이는 Angular에서처럼 '템플릿'을 달성하는 가능한 방법입니다.

jsx는 실제로는 html이 아니라 가상 DOM의 마크업이므로 jsx 파일만 사용하여 react에서 사용할 수 없습니다.

템플릿이 반응 구성 요소인 경우 이 작업을 수행할 수 있습니다.

템플릿js

var React = require('react');

var Template = React.createClass({
    render: function(){
        return (<div>Mi HTML</div>);
    }
});

module.exports = Template;

Main Component.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 Components를 사용합니다. 일반 입력은 없습니다.

i-frame src는 http 프로토콜만 허용합니다.따라서 컴퓨터에서 정적 html을 로드하는 경우 브라우저 URL은 "file: //home/myComputer/localOfFiles/my"가 됩니다.HTMLfile.html"로 올바른 경로는 "http://localhost:3000/myHTMLfile.html"이어야 합니다.

확장자 또는 다른 어떤 것도 사용할 필요가 없습니다.myHTMLfile.html을 React 코드의 공용 폴더로 이동하고 이 경로 "http://localhost:3000/myHTMLfile.html"을 사용해 보십시오.이 솔루션은 여기서 빌린 것입니다(PDF 렌더링용으로도 사용 가능).

https://github.com/wojtekmaj/react-pdf/issues/300#issuecomment-846226460

언급URL : https://stackoverflow.com/questions/33973757/how-can-i-render-html-from-another-file-in-a-react-component