У меня есть базовый проект 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'))
Есть идеи, как это сделать?
Спасибо!
Вы можете просто
import CompHeader from './Header'
и использовать нормально.
Я не думаю, что вы можете использовать тире в JSX, и элементы JSX, которые не являются собственными элементами, должны быть написаны с заглавной буквы.
Вы можете объяснить, почему вы хотите это сделать?