React.js : JavaScript에서 jsx를 분리하는 방법

React.js : JavaScript에서 jsx를 분리하는 방법

---

구성 요소의 렌더링 기능에서 별도의 파일로 jsx를 이동하는 방법이 있습니까? 그렇다면 render 함수에서 jsx를 어떻게 참조합니까?

---

다음은 NodeJS, Browserify 또는 Webpack에서 CommonJS 모듈을 사용하는 jsx 템플릿을 분리하는 패턴입니다. NodeJS에서 JSX를 컴파일 할 필요가 없도록 node-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 : thisReact 구성 요소에 대한 템플릿 함수 설정 에 대한 Damon Smith의 답변에 제안을 통합했습니다 .

2016 년 12 월 업데이트 : 현재 모범 사례는 .js 확장을 사용하고 Babel과 같은 빌드 도구를 사용하여 소스에서 최종 자바 스크립트를 출력하는 것입니다. 이제 막 시작했다면 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>
  );
};

---

You can use react-templates. It gives you exactly this separation between the markup and the component itself, and much more.

I found it very useful for my needs (a large scale web app).

---

One problem with moving templates into a separate file is that if you use handlers like:

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

and then in your component you use:

render: function() {
    return myTemplate;
}

the generated template code will call this.handleSubmit(), so the "this" will be wrong and the handlers won't work. What you need to do is put them in a function, like this:

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

then in your component's render function, you need to bind it to 'this' correctly, then call it, like this:

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

Now you can put that template definition anywhere, in a separate file or however you want to structure and reference your own code. (power to you! Don't listen to these crazy prescriptive frameworks! :) )

---

I just separated JSX into anonymous function files

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

In template you can access props or state or functions using component variable.

---

If you don't use any module system, i.e. rely on script tags only, simple expose your JSX component in a global variable and use it when you need :

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

Note : the script tag for component.js must appear before the script tag for main.js.

If you use a Commonjs-like module system like Browserify, simply export your component definition and require it when you need it.

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

참고URL : https://stackoverflow.com/questions/21066581/react-js-how-to-decouple-jsx-out-of-javascript