[英]<App/> component is not rendering in React.js
I don't know where is the issue is arriving.我不知道问题在哪里。 struggling a lot but still my component is not rendering in React.js.挣扎了很多,但我的组件仍然没有在 React.js 中呈现。 it's just showing white screen and nothing else.它只是显示白色屏幕,没有别的。
Cards.jsx卡片.jsx
import React from "react";
function Card(props){
return (
<>
<img src={props.imgsrc} alt="mypic"/>
<h1>{props.title}</h1>
</>
)
}
export default Card;
App.jsx应用程序.jsx
import React from 'react';
import Card from "./Cards";
import Reportdata from "./Api";
const App = () => {
<>
{Reportdata.map(val=>{
return (
<Card
key = {val.id}
imgsrc = {val.image}
title = {val.title}/>
)
})};
</>
}
export default App;
index.js索引.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from "./App.jsx";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<App />
);
You need to add the return statement inside the App component:您需要在App组件中添加 return 语句:
const App = () => {
return (
<>
{Reportdata.map(val=>{
return (
<Card
key = {val.id}
imgsrc = {val.image}
title = {val.title}/>
)
})};
</>
)}
Alternatively, if you don't want to use the return statement make sure to remove the curly braces:或者,如果您不想使用 return 语句,请确保删除大括号:
const App = () => (
<>
{Reportdata.map(val=>{
return (
<Card
key = {val.id}
imgsrc = {val.image}
title = {val.title}/>
)
})};
</>
)
Docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions?retiredLocale=it文档: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions?retiredLocale=it
As mentioned by @poal98 , you need a return
statement.正如@poal98所提到的,您需要一个return
语句。 Or you could also get rid of the {
}
from the App Component:或者您也可以从 App 组件中删除{
}
:
const App = () => (
<>
{Reportdata.map((val) => {
return <Card key={val.id} imgsrc={val.image} title={val.title} />;
})}
;
</>
);
Here's a Working Sample .这是一个工作示例。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.