React ES6 导入无状态组件答案

【问题标题】：React ES6 importing a stateless componentReact ES6 导入无状态组件
【发布时间】：2016-04-20 18:56:55
【问题描述】：

我一直在寻找这个问题的答案，哈哈。如何将无状态反应类导入另一个类？我收到错误：

"warning.js:45Warning: HTMLImageElement(...): 在返回的组件实例上找不到render 方法：您可能忘记定义render，从无状态组件返回 null/false，或尝试过渲染一个元素，其类型是一个不是 React 组件的函数。”

我正在尝试导入 CalloutImage 组件....

import React from 'react';
import ReactDOM from 'react-dom';

export class CalloutImage extends React.Component {
    constructor(props) {
        super(props)
        this.handleClick = this.handleClick.bind(this)
    }
    render() {
        return (
            <Image onClick={this.handleClick} className="header-img" src="https://images.unsplash.com/photo-1453106037972-08fbfe790762?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=cbaaa89f2c5394ff276ac2ccbfffd4a4" />
        )
    }
    handleClick() {
        alert();
    }

}

进入....

import { CalloutImage } from './CalloutImage.jsx'

const lorem = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'

class App extends React.Component {
    render() {
        return (
            <div>
                <Navigation />
                <Grid>
                    <CalloutImage />
                    <ColumnContent />
                </Grid>
                <Footer />
            </div>
        ) 
    }
}

class Navigation extends React.Component {
    render() {
        return (
            <Navbar inverse>
                <Navbar.Header>
                    <Navbar.Brand>VA</Navbar.Brand>
                    <Navbar.Toggle />
                </Navbar.Header>
                <Navbar.Collapse>
                    <Nav>
                        <NavItem eventKey={1} href="#">Home</NavItem>
                        <NavItem eventKey={2} href="#">About</NavItem>
                        <NavItem eventKey={3} href="#">Users</NavItem>
                    </Nav>
                </Navbar.Collapse>
            </Navbar>
        )
    }
}

class ColumnContent extends React.Component {
    render() {
        return (
            <Row>
                <Col sm={6}>
                    <h2>Heading 2</h2>
                    <p>{lorem}</p>
                </Col>
                <Col sm={6}>
                    <h2>Heading 2</h2>
                    <p>{lorem}</p>
                </Col>
            </Row>
        )
    }
}




class Footer extends React.Component {
    render() {
        return (
            <footer>
                <Grid>
                    <p>VA &copy;</p>
                </Grid>
            </footer>
        )
    }
}

ReactDOM.render(<App />, document.getElementById('app'))

【问题讨论】：

试试这个import CalloutImage from './CalloutImage.jsx'，以防你的 CalloutImage.jsx 只返回一个组件。
@ShubhamKhatri 这不起作用，因为CalloutImage 是常规导出，而不是default 导出。

标签： javascript reactjs ecmascript-6

【解决方案1】：

Image 应该小写，否则 React 认为它是一个 React 组件并尝试在其上调用 render()。

【讨论】：

大声笑，你一定是在开玩笑吧。我也在使用 react-bootstrap，他们有一个我正在使用的 Image 组件，所以它不必是大写的吗？
如果你使用的是这个，一定要导入组件。

【解决方案2】：

在 React JSX 中，如果你使用 HTML tags，那么它应该是 lowercase。对于所有其他用户定义或任何其他从外部包导入的组件，应始终为Capitalized。

在您的代码中，由于您使用的是来自react-bootstrap 的<Image /> 组件，您应该将该组件导入您的文件中然后使用它。

【讨论】：