我在 React 中创建了一个简单的测试程序，它显示了一段文本。
import React from 'react';
import componentClass from './components/componentClass';
export default function App () {
return (
<h1>example</h1>
)
}
我现在要做的是获取此示例文本并使其成为自己的独立组件。我创建了一个名为componentClass示例文本显示位置的类组件。
import React, { Component } from 'react';
export default class componentClass extends Component {
render() {
return (
<h1>example</h1>
)
}
}
然后我在 App.js 中渲染这个组件。
import React from 'react';
import componentClass from './components/componentClass';
export default function App () {
return (
<componentClass />
)
}
问题是什么都没有显示，所以我对为什么没有显示组件感到困惑。下面是我的 index.js 文件。
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
你应该在命名 React 组件时使用 PascalCase
class ComponentClass extends React.Component {
render() {
return (
<h1>Component class</h1>
)
}
}
function App () {
return (
<ComponentClass />
)
}
ReactDOM.render(<App />, document.querySelector("#app"))
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句