从另一个文件

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;

如何从另一个文件中的第二个组件的return方法显示该组件？

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({ ... });

命名为Import

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

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