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

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

jsx를 컴포넌트의 렌더 함수에서 다른 파일로 이동하는 방법이 있습니까?그렇다면 렌더링 함수의 jsx를 참조하려면 어떻게 해야 합니까?

리액트 템플릿을 사용할 수 있습니다.마크업과 컴포넌트 자체를 정확하게 구분할 수 있습니다.

제 요구에 매우 도움이 되었습니다(대규모 웹 앱).

템플릿을 다른 파일로 이동할 때의 문제 중 하나는 다음과 같은 핸들러를 사용하는 경우입니다.

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

다음으로 컴포넌트에서 다음을 사용합니다.

render: function() {
    return myTemplate;
}

생성된 템플릿코드는 이것을 호출합니다.handleSubmit().따라서 "this"가 잘못되어 핸들러가 동작하지 않습니다.필요한 것은 다음과 같은 기능에 넣는 것입니다.

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

다음으로 컴포넌트의 렌더 함수에서 컴포넌트를 올바르게 'this'에 바인드한 후 다음과 같이 호출해야 합니다.

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

이제 템플릿 정의를 다른 파일에 넣거나 자체 코드를 구성 및 참조할 수 있습니다.(당신의 힘!이런 말도 안 되는 규범적 프레임워크는 듣지 마세요! : )

다음은 Common을 사용하는 템플릿 jsx를 구분하기 위한 패턴입니다.NodeJS, Browserify 또는 Webpack의 JS 모듈.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 컴포넌트로 이동합니다.

업데이트 12/2016: 현재 베스트 프랙티스는 .js 확장자를 사용하고 Babel과 같은 빌드 도구를 사용하여 소스로부터 최종 Javascript를 출력하는 것입니다.이제 막 시작한 경우 create-react-app을 살펴보십시오.또한 최신 React 모범 사례에서는 상태를 관리하는 구성 요소(일반적으로 "컨테이너 구성 요소"라고 함)와 표시되는 구성 요소를 분리할 것을 권장합니다.이러한 프레젠테이션 컴포넌트를 함수로 쓸 수 있게 되었기 때문에 이전 예에서 사용한 템플릿 함수와 크게 다르지 않습니다.현재 대부분의 JSX 코드를 분리할 것을 권장합니다.이러한 예에서는 ES5 구문을 사용하고 있습니다.

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

방금 JSX를 익명 함수 파일로 분리했습니다.

템플릿입니다.js

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

my-component.displaces

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

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

할 수 .component★★★★★★ 。

시스템을 " "에 의존합니다.script, simple :, JSX의 컴포넌트를 필요에 따라

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

★★★★scriptcomponent.displaces 태그는 component.tagscriptmain.tag를 지정합니다.

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

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