web-dev-qa-db-ja.com

React.js：JavaScriptからjsxを分離する方法

コンポーネントのレンダリング機能から別のファイルにjsxを移動する方法はありますか？もしそうなら、どのようにレンダリング関数でjsxを参照しますか？

javascriptreactjsreact-jsx
58
tldr

NodeJS、Browserify、またはWebpackでCommonJSモジュールを使用するテンプレートjs​​xを分離するためのパターンを次に示します。 NodeJSでは、node-jsxモジュールがJSXをコンパイルする必要を回避するのに役立つことがわかりました。

_// index.js
require('node-jsx').install({extension: '.jsx'});
var React = require('react'),
    Component = require('./your-component');


// your-component.jsx
var YourComponent,
    React = require('react'),
    template = require('./templates/your-component.jsx');

module.exports = YourComponent = React.createClass({
  render: function() {
    return template.call(this);
  }
});


// templates/your-component.jsx
/** @jsx React.DOM */
var React = require('react');

module.exports = function() {

  return (
    <div>
      Your template content.
    </div>
  );

};
_

更新2015-1-30：テンプレート関数のthisをReactコンポーネントに設定するためのDamon Smithの回答に提案を組み込みました。

アップデート12/2016：現在のベストプラクティスは、.js拡張子を使用し、Babelなどのビルドツールを使用して、ソースから最終的なJavaScriptを出力することです。始めたばかりの場合は create-react-app をご覧ください。また、最新のReact=ベストプラクティスでは、状態を管理するコンポーネント（通常「コンテナコンポーネント」と呼ばれる）とプレゼンテーションであるコンポーネントを分離することを推奨しています。これらのプレゼンテーションコンポーネントは、これらは、前の例で使用したテンプレート関数からそれほど遠くありません。ここでは、プレゼンテーション用JSXコードの大部分を分離することをお勧めします。これらの例では、まだ ES5 React.createClass()構文 =。

_// index.js
var React = require('react'),
    ReactDOM = require('react-dom'),
    YourComponent = require('./your-component');

ReactDOM.render(
  React.createElement(YourComponent, {}, null),
  document.getElementById('root')
);

// your-component.js
var React = require('react'),
    YourComponentTemplate = require('./templates/your-component');

var YourComponentContainer = React.createClass({
  getInitialState: function() {
    return {
      color: 'green'
    };
  },

  toggleColor: function() {
    this.setState({
      color: this.state.color === 'green' ? 'blue' : 'green'
    });
  },

  render: function() {
    var componentProps = {
      color: this.state.color,
      onClick: this.toggleColor
    };
    return <YourComponentTemplate {...componentProps} />;
  }
});

module.exports = YourComponentContainer;

// templates/your-component.js
var React = require('react');

module.exports = function YourComponentTemplate(props) {
  return (
    <div style={{color: props.color}} onClick={props.onClick}>
      Your template content.
    </div>
  );
};
_
20
rmarscher

react-templates を使用できます。これにより、マークアップとコンポーネント自体の間の正確な分離が可能になります。

私のニーズ（大規模なWebアプリ）に非常に役立つことがわかりました。

28
tomericco

テンプレートを別のファイルに移動する際の問題の1つは、次のようなハンドラーを使用する場合です。

var myTemplate = (
    <form onSubmit={this.handleSubmit}></form>
);

次に、コンポーネントで使用します：

render: function() {
    return myTemplate;
}

生成されたテンプレートコードはthis.handleSubmit（）を呼び出すため、「this」は間違っているため、ハンドラーは機能しません。あなたがする必要があるのは、次のように関数に入れることです：

var myTemplate = function() {
    return (
        <form onSubmit={this.handleSubmit}></form>
    );
};

次に、コンポーネントのレンダリング関数で、「this」に正しくバインドし、次のように呼び出す必要があります。

render: function() {
    return myTemplate.bind(this)();
},

これで、そのテンプレート定義をどこにでも、別のファイルに、または独自のコードを構造化して参照したい場合でも配置できます。 （あなたへの力！これらのクレイジーな規範的フレームワークに耳を傾けないでください！:)）

23
Damon Smith

JSXを匿名関数ファイルに分離しました

template.js

export default (component) => {
return <h1>Hello {component.props.name}</h1>
}

my-component.js

import React, {Component} from 'react';
import template from './template';

export default MyComponent extends Component {
   render() {
     return template(this);
   }
}

テンプレートでは、component変数を使用して、小道具、状態、または関数にアクセスできます。

12
Ivan Bajalovic

モジュールシステムを使用しない場合、つまりscriptタグのみに依存する場合は、JSXコンポーネントをグローバル変数で公開し、必要なときに使用します。

// component.js
var Component = React.createClass({ /* your component */ });
// main.js
React.renderComponent(Component({}), domNode);

注：component.jsのscriptタグは、main.js。のscriptタグの前に表示する必要があります

BrowserifyのようなCommonjsのようなモジュールシステムを使用する場合は、コンポーネント定義をエクスポートし、必要なときにそれを要求するだけです。

// component.js
var React = require("react");
module.exports = React.createClass({ /* your component */ });
// main.js
var Component = require("component.js");
React.renderComponent(Component({}), domNode);
2
DjebbZ