英文:
I test a website in react and my functions are not showing when I run my code
问题
function banner() {
const title = "c'est pur 😄";
return (<h1>{title}</h1>);
}
function cart() {
const prixbedo = 10;
const prixhero = 20;
const prixcoc = 70;
return (
<div>
<h2>Panier</h2>
<ul>
<li>bedo : {prixbedo}$</li>
<li>héroïne : {prixhero}$</li>
<li>cocaïne : {prixcoc}$</li>
</ul>
</div>
);
}
ReactDOM.render(
<div>
<banner />
<cart />
</div>,
document.getElementById("root")
);
i declared my file .js in my file .html when I test with simple function is good I see on my website the result but with this code nothing happens
<details>
<summary>英文:</summary>
`
function bannner() {
const title = "c'est pur 😎"
return (<h1>{title}</h1>)
}
function cart() {
const prixbedo = 10
const prixhero = 20
const prixcoc = 70
return (<div>
<h2>Panier</h2>
<ul>
<li>bedo : {prixbedo}$</li>
<li>heroïne : {pixhero}$</li>
<li>cocaïne : {prixcoc}$</li>
</ul>
</div>)
}
ReactDOM.render(<div><banner /><cart /></div>, document.getElementById("root"))
i declared my file .js in my file .html when I test with simple function is good I see on my website the result but with this code nothing happens
</details>
# 答案1
**得分**: 0
```
需要创建根元素。
```
function bannner() {
const title = "c'est pur 😆";
return (<h1>{title}</h1>);
}
function cart() {
const prixbedo = 10;
const prixhero = 20;
const prixcoc = 70;
return (
<div>
<h2>Panier</h2>
<ul>
<li>bedo : {prixbedo}$</li>
<li>héroïne : {prixhero}$</li>
<li>cocaïne : {prixcoc}$</li>
</ul>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<div><banner /><cart /></div>);
```
<details>
<summary>英文:</summary>
You need to create root.
```
function bannner() {
const title = "c'est pur 😎"
return (<h1>{title}</h1>)
}
function cart() {
const prixbedo = 10
const prixhero = 20
const prixcoc = 70
return (<div>
<h2>Panier</h2>
<ul>
<li>bedo : {prixbedo}$</li>
<li>heroïne : {pixhero}$</li>
<li>cocaïne : {prixcoc}$</li>
</ul>
</div>)
}
const root = ReactDOM.createRoot( document.getElementById("root"))
root.render(<div><banner /><cart /></div>)
</details>
# 答案2
**得分**: 0
请注意，以下是代码的翻译部分：
```javascript
function Banner() {
const title = "c'est pur 😆"
return <h1>{title}</h1>
}
function Cart() {
const prixbedo = 10
const prixhero = 20
const prixcoc = 70
return (
<div>
<h2>Panier</h2>
<ul>
<li>bedo : {prixbedo}$</li>
<li>héroïne : {prixhero}$</li>
<li>cocaïne : {prixcoc}$</li>
</ul>
</div>
)
}
ReactDOM.render(
<div>
<Banner />
<Cart />
</div>,
document.getElementById("root")
)
```
希望这有所帮助。如果你需要进一步的翻译，请告诉我。
<details>
<summary>英文:</summary>
You should not write the name of the tale in lowercase.
Causes an error in the function rendering.
Write as follows:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function Banner() {
const title = "c'est pur 😎"
return <h1>{title}</h1>
}
function Cart() {
const prixbedo = 10
const prixhero = 20
const prixcoc = 70
return (
<div>
<h2>Panier</h2>
<ul>
<li>bedo : {prixbedo}$</li>
<li>heroïne : {prixhero}$</li>
<li>cocaïne : {prixcoc}$</li>
</ul>
</div>
)
}
ReactDOM.render(
<div>
<Banner />
<Cart />
</div>,
document.getElementById("root")
)
<!-- end snippet -->
</details>
# 答案3
**得分**: 0
我认为你的组件没有显示出来是因为你像其他人指出的一样使用小写来编写你的函数。我只是想提供更多的上下文。
根据React文档[这里][1]，在JSX中，小写标签名称被视为HTML标签。例如：
`<cart />` 编译为 React.createElement('cart')（HTML标签）。
`<Cart />` 编译为 React.createElement(Cart)（React组件）。
因此，因为`<cart />`不是一个被识别的标签，所以它不会显示出来。希望这有所帮助。
[1]: https://reactjs.org/docs/jsx-in-depth.html#html-tags-vs.-react-components
<details>
<summary>英文:</summary>
I think your component not showing up is because you used lower case to write your functions just like other people have pointed out. I just wanted to give more context.
According to the react docs [here][1], in JSX, lower-case tag names are considered to be HTML tags. eg
`<cart />` compiles to React.createElement('cart') (html tag).
`<Cart />` compiles to React.createElement(Cart) (a react component)
So because `<cart />` is not a recognised tag, it doesn't show. Hope this helps
[1]: https://reactjs.org/docs/jsx-in-depth.html#html-tags-vs.-react-components
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论