[英]I defined component and used it App.js but getting undefined error
When I try to access the relevant component under app.js, I get the error "WARNING in [eslint] rc\App.js Line 2:8: 'personAdd' is defined but never used no-unused-vars".当我尝试访问 app.js 下的相关组件时,我收到错误“[eslint] rc\App.js 第 2:8 行中的警告:'personAdd' 已定义但从未使用 no-unused-vars”。 When I run the project, I see tags in the form of in html, but the component does not appear on the screen.
运行项目时,我看到 html 形式的标签,但该组件未出现在屏幕上。 I have included the codes below.
我已经包含了下面的代码。 Thanks in advance.
提前致谢。 Note: Changes under.eslintrc.json didn't work.
注意:.eslintrc.json 下的更改不起作用。
App.js应用程序.js
import React from 'react'; import personAdd from './screens/personAdd'; function App() { return ( <personAdd /> ) } export default App;
personAdd.js personAdd.js
import React from 'react'; class personAdd extends React.Component{ render(){ return( <div id = "personAdd"> <h1>Kullanıcı Bilgileri</h1> <form> <label htmlFor="id">Ad</label> <input id="id"/> <button>Add</button> </form> </div> ) } } export default personAdd;
index.js index.js
import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; //import personAdd from './screens/personadd'; import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <App /> </React.StrictMode> ); /*const personadd = ReactDOM.createRoot(document.getElementById('personadd')); personadd.render( <React.StrictMode> <personAdd /> </React.StrictMode> );*/
You don't need to manually create new root elements for every component you want to render.您不需要为要渲染的每个组件手动创建新的根元素。
React inserts an initial element 'root' into the DOM so that the app can render within that. React 会在 DOM 中插入一个初始元素“根”,以便应用程序可以在其中呈现。
Try removing:尝试删除:
/*const personadd = ReactDOM.createRoot(document.getElementById('personadd'));
personadd.render(
<React.StrictMode>
<personAdd />
</React.StrictMode>
);*/
If you want to render your personAdd component you can add it as a child of App as you've already done.如果您想渲染您的 personAdd 组件,您可以将它添加为 App 的子组件,就像您已经完成的那样。
function App() {
return (
<personAdd />
)
}
The other reason you're getting these issues is because you're not using Pascal case when naming your components (PersonAdd).您遇到这些问题的另一个原因是您在命名组件 (PersonAdd) 时没有使用 Pascal 大小写。
function App() {
return (
<PersonAdd />
)
}
In addition as others have mentioned, stick to function components rather than class components.此外,正如其他人所提到的,坚持使用 function 组件而不是 class 组件。
I'd recommend having a look at the React Beta Docs which now do everything with functional components.我建议您查看React Beta Docs ,它现在可以使用功能组件完成所有操作。 There are helpful walkthroughs on there that should help you out.
那里有一些有用的演练可以帮助你。
As @evolutionxbox said.正如@evolutionxbox 所说。 Try naming the component with UpperCamelCase.
尝试使用 UpperCamelCase 命名组件。 It's used to specify a React element https://reactjs.org/docs/jsx-in-depth.html#specifying-the-react-element-type
它用于指定一个 React 元素https://reactjs.org/docs/jsx-in-depth.html#specifying-the-react-element-type
Also, it is now common to create components as functions and not Classes.此外,现在通常将组件创建为函数而不是类。 Of course it's up to you if you do prefer classes.
当然,如果你喜欢上课,这取决于你。 https://reactjs.org/docs/components-and-props.html#rendering-a-component
https://reactjs.org/docs/components-and-props.html#rendering-a-component
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.