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

Question

我有一个ReactJS基本项目，可以很好地处理以下两个文件（以及其他文件）：

页眉.js

import React from 'react'

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

export default Header

应用程序.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 />。如下所示：

应用程序.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'))

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

谢谢！

标签： javascripthtmlreactjsweb-component

Answer 1

你可以简单地

import CompHeader from './Header'

并正常使用。

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