65

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

4

5 に答える 5

29

反応テンプレートを使用できます。これにより、マークアップとコンポーネント自体との間のこの分離が正確に得られます。

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

于 2015-01-27T21:20:59.323 に答える
22

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 日の更新: Damon Smith の回答にthis、テンプレート関数を React コンポーネントに設定するという提案が組み込まれました。

2016 年 12 月更新: 現在のベスト プラクティスは、.js 拡張子を使用し、Babel などのビルド ツールを使用してソースから最終的な JavaScript を出力することです。始めたばかりの場合は、create-react-app をご覧ください。また、最新の React のベスト プラクティスでは、状態を管理するコンポーネント (通常は「コンテナー コンポーネント」と呼ばれます) とプレゼンテーション用のコンポーネントを分離することを推奨しています。これらのプレゼンテーション コンポーネントは関数として記述できるようになったため、前の例で使用されたテンプレート関数からそれほど離れていません。ここでは、プレゼンテーション用の JSX コードのほとんどを分離することをお勧めします。これらの例では、依然としてES5React.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>
  );
};
于 2014-11-21T23:11:32.370 に答える
13

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テンプレートでは、変数を使用して小道具、状態、または関数にアクセスできます。

于 2017-02-25T11:52:01.853 に答える
2

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

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

注 : component.jsscriptのタグは、 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);
于 2014-06-04T16:47:16.677 に答える