Reactコンポーネントの別のファイルからHTMLをレンダリングすることはできますか？Reactコンポーネントの別のファイルからHTMLをレンダリングするにはどうすればよいですか？
私は次のことを試してみましたが、それは動作しません：
var React = require('react');
/* Template html */
var template = require('./template');
module.exports = React.createClass({
render: function() {
return(
<template/>
);
}
});
唯一の小道具からレンダリングされるコンポーネントを持っているのが一般的です。
ロジックがある上位コンポーネントで、テンプレートコンポーネントをインポートして必要な小道具を渡すだけです。すべてのロジックは上位のコンポーネントにとどまり、テンプレートのみがレンダリングされます。これは、Angularのような 'テンプレート'を実現するための方法です。
jsxファイルはjsxのみを持ち、Reactで使用する方法はありません.jsxは実際にはHTMLではなく、Reactが管理する仮想DOMのマークアップです。
あなたの応答のためのタンク。しかし、大きなhtmlページを使用する場合、このメソッドは1つのファイルjsx内にさまざまな行を持ちます。私は、各要求に対して1つのファイルjsxを作成することはできません。 –
すべての行/ブロックにjsxファイルを持つ必要はありません。 Reactを使って作業するときは、すべてのコンポーネントが使用するデータに基づいてアプリケーションを論理コンポーネントに分割し、このロジックを使用してコンポーネントを配置します。たとえば、サーバーからユーザーデータをフェッチするコンポーネントを持つことができます。それは、UsersDataという名前だとしましょう。次に、UserDataという名前のユーザーのコンポーネントがあります。そして最後に、バイオグラフィのようなデータの一部をレンダリングします。つまり、順序は： UsersData - > UserData - > Biographyです。伝記コンポーネントには、生年月日や年齢などのフィールドがあります。 – Ivan
あなたは、任意のHTMLを注入するdangerouslySetInnerHTMLプロパティを使用することができます。
// 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>'
お返事ありがとうございます。このエラーが表示されます。Uncaught Error：モジュール 'template.html'が見つかりません。 –
テンプレートの正しいパスを指定する必要があります。 'template.html'が同じディレクトリにあることを示すために私の答えを更新しました。 –
あなたtemplate.htmlファイルは単なるHTMLとはないが、コンポーネントを反応させるのであれば、あなたはJSファイルをどうするのと同じ方法でそれを必要とすることはできません。
ただし、Browserifyを使用している場合は、stringifyというトランスフォームがあり、非jsファイルを文字列として要求することができます。トランスフォームを追加すると、HTMLファイルを要求することができ、まるで文字列であるかのようにエクスポートされます。
HTMLファイルが必要になったら、dangerouslySetInnerHTML propを使用してHTML文字列をコンポーネントに注入する必要があります。
var __html = require('./template.html');
var template = { __html: __html };
React.module.exports = React.createClass({
render: function() {
return(
<div dangerouslySetInnerHTML={template} />
);
}
});
これは、リアクションについての多くのことに反するものです。通常のHTMLファイルではなく、ReactコンポーネントとしてJSXを使用してテンプレートを作成する方が自然です。
JSX構文を使用すると、HTMLなどの構造化されたデータを簡単に表現できます（特に、stateless function componentsを使用した場合）。あなたの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>
);
};
次に、stringifyを必要とせずに必要とすることができます。
var Template = require('./template');
module.exports = React.createClass({
render: function() {
var bar = 'baz';
return(
<Template foo={bar}/>
);
}
});
これは、元のファイルの構造のすべてを維持するが、リアクトの小道具モデルの柔軟性を活用し、通常のHTMLファイルとは異なり、コンパイル時の構文チェックが可能になります。
作品はありますが、素材-uiは使用できません。私のHTMLファイルにTextFieldが含まれており、レンダリングされません –
申し訳ありませんが、私はフォローしていません。どのアプローチを試しましたか？エラーはありますか？たぶんあなたの質問にあなたのhtmlファイルを含めると便利です。 –
テンプレートが反応コンポーネントの場合は、これを実行できます。
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')
);
そして、あなたは、互換性の材料の使用-UIコンポーネント、ない通常の入力に対して、材質-UIを使用している場合。
カスタムコンポーネントには大文字を使用する必要がありますので、 'template'を' Template'に変更してから '' – Icepickle
として返してください。 –
@Icepickle私はこのエラーを受け取ります：キャッチしていないエラー： "./template"モジュールを見つけることができません –