javascript - 从不同的文件渲染 react 组件

Question

我已经构建了一个 react 组件，我想从单独文件中的第二个组件中渲染它。

StoryStrap.react.js

var React = require('react');
import { Input, ButtonInput, Alert } from 'react-bootstrap';

var StoryStrap = React.createClass({ 

  render: function() {

    return (
        <div>
            <Input type="text" placeholder="Headline" />
            <Input type="text" placeholder="Subline" />
        </div>
    );
  }

});

module.exports = StoryStrap;

如何通过不同文件中第二个组件的返回方法显示此组件？

MainSection.react.js

return (
    <div className="container">
        <div className="row row-grid">
            <section id="ROTopBar" className="ro-topBar box-shadow--2dp">

                <div id="storyStraps" className="col-md-4">
                    <h4>Story Straps</h4>
                    <StoryStrap /> //Display storyStrap component here
                </div>

                <div id="storyNames" className="col-md-4">
                    <h4>Name</h4>
                </div>

                <div id="storyInfo" className="col-md-4">
                    <h4>Info</h4>
                </div>

            </section>
        </div>
    </div>
);

Answer 1

您需要需要该组件。

var StoryStrap = require('./StoryStrap.react.js');

然后你可以使用<StoryStrap />在你的渲染函数中。

最好尝试与您的模块导入/导出语法保持一致。使用新的 ES6 模块语法或旧的 commonjs 样式。

默认导出

// ES6 modules
export default React.createClass({ ... });

// ES5 & commonjs
module.exports = React.createClass({ ... });

默认导入

// ES6 modules
import StoryStrap from './StoryStrap.react.js';

// ES5 & commonjs
var StoryStrap = require('./StoryStrap.react.js');

命名导出

// ES6 modules
export const StoryStrap = React.createClass({ ... });

// ES5 & commonjs
exports.StoryStrap = React.createClass({ ... });

命名导入

// ES6 modules
import { StoryStrap } from './StoryStrap.react.js';

// ES5 & commonjs
var StoryStrap = require('./StoryStrap.react.js').StoryStrap;