React.js：如何从一个 app.jsx 文件中呈现分离的 jsx 模块？

Question

您好，我做了不同的和分离的 react .jsx 模块（文件），我想调用它们并从一个名为 app.jsx.

的文件中渲染

这是模块之一：

    var React = require('react'),
    mui = require('material-ui'),
    DatePicker = mui.DatePicker;

var DatePicker = React.createClass({

    render: function() {
        return (

            <div className="DatePicker">
                <DatePicker hintText="Elige una fecha" mode="landscape" />     
            </div>
        );
    },
});

module.exports = DatePicker;

这是我要启动分离模块渲染的 app.jsx 文件：

(function () {
  var React = require('react'),
    injectTapEventPlugin = require("react-tap-event-plugin"),
    Main = require('./components/main.jsx'); // Our custom react component
    DatePicker = require('./components/DatePicker.jsx'); 

  //Needed for React Developer Tools
  window.React = React;

  //Needed for onTouchTap
  //Can go away when react 1.0 release
  injectTapEventPlugin();

  React.render(<Main />, document.body);
  React.render(<DatePicker />, document.getElementById('DatePicker'));    

})();

主要组件正在呈现，但 DatePicker 未呈现，这是呈现多个分离组件的正确方法还是我必须改变主意并以不同的方式构建应用程序？

此致，哈维尔

Answer 1

此行导致问题：

React.render(<Main />, document.body);

这会将 <body> 标签的内容替换为 React.js 组件。这就是以下行不起作用的原因：

React.render(<DatePicker />, document.getElementById('DatePicker'));

<div id='DatePicker' /> 已替换为您的 <Main /> 组件。

因此您必须执行以下操作：

<body>
   <div id='Main'></div>
   <div id='DatePicker'></div>
</body>

React.render(<Main />, document.getElementById('Main'));
React.render(<DatePicker />, document.getElementById('DatePicker'));

或者让<Main />组件渲染<DatePicker />组件。

var Main = React.createClass({
  render: function () {
    return <div><DatePicker /></div>;
  }
});

React.js：如何从一个 app.jsx 文件中呈现分离的 jsx 模块？

React.js: How to render separated jsx modules from one app.jsx file?

javascript

reactjs

material-design