Использование пользовательского тега для ссылки на компоненты ReactJS внутри приложения ReactJS - PullRequest
Новая
       5

Использование пользовательского тега для ссылки на компоненты ReactJS внутри приложения ReactJS

0 голосов
/ 27 октября 2018

У меня есть 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'))

Есть идеи, как это сделать?

Спасибо!

1 Ответ

0 голосов
/ 27 октября 2018

Вы можете просто 

import CompHeader from './Header'

и используйте нормально.

Я не думаю, что вы можете использовать тире в элементах JSX и JSX, которые не являются нативными элементами и должны быть написаны заглавными буквами.

...