您好，我制作了不同且独立的 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，这是渲染多个独立组件的正确方法吗？还是我必须改变主意并以不同的方式构建应用程序？
问候， 哈维尔
最佳答案
此行引起问题:
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>;
}
});
关于javascript - React.js : How to render separated jsx modules from one app. jsx 文件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29509521/