Question

我一直在寻找这个答案永远大声笑。如何将无状态反应类导入另一个类？我收到了错误：

“warning.js：45警告：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'))

Answer 1

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

Answer 2

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

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

React ES6导入无状态组件

2 个答案: