Question

我有一个ReactJS基本项目，可以正常使用以下两个文件（以及其他文件）：

Header.js

import React from 'react'

const Header = () => (
    <div>THIS IS A HEADER</div>
)

export default Header

App.js

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import Header from './Header'

class App extends Component {
    render() {
        return (
            <div>
                <Header />
                <div>
                    Hello World! This is the content.
                </div>
            </div>
        )
    }
}

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

我想知道的是：

如何使用自定义标记引用Header组件，例如：<comp-header />而不是<Header />。如下所示：

App.js

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import Header from './Header'

class App extends Component {
    render() {
        return (
            <div>
                <comp-header />
                <div>
                    Hello World! This is the content.
                </div>
            </div>
        )
    }
}

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

关于如何做到这一点的任何想法？

谢谢！

Answer 1

您可以简单地

import CompHeader from './Header'

并正常使用。

我认为您不能在非本机元素需要大写的JSX和JSX元素中使用破折号。

使用自定义标签在ReactJS应用程序中引用ReactJS组件

1 个答案: