Javascript 试图将JSX作为道具传递

更新：

代码确实有效！有一个标题阻止了内容，并认为它没有正确呈现。抱歉搞混了

---

我试图将这个简单的

JSX标记作为道具传递给

导航

，然后显示它，但由于某种原因它不起作用

下面是我的

App.js

文件，它将JSX元素传递给导航：

const-App=（）=>{
返回(
);
}
导出默认应用程序；

这是我的

Navigation.js

文件，它应该使用prop

main

并显示它：

const导航=（道具）=>{
返回(
{props.main}
);
}
导出默认导航；

你可以通过你的

测试
作为
测试
，然后在
导航
组件中，你只需用
道具替换
道具。主
。儿童
我已经尝试过了，它对我有效

链接：

App.js

import React from "react";
import Navigation from "./Navigation";
import "./styles.css";

const App = () => {
  return (
    <div>
      <Navigation main={<p>Testing!@22</p>} />
    </div>
  );
};

export default App;

import React from "react";

const Navigation = (props) => {
  return (
    <div>
      <main>{props.main}</main>
    </div>
  );
};

export default Navigation;

你应该在你的道具中添加信息，而不是整个html元素。以后只要把你的道具添加到你想要的html元素中就可以了<代码>主测试@22'
然后在导航中执行
{props.main}
或让
const whateverNameYouWant='测试@22'
然后
main={whateverNameYouWant}
。
你最好在导航中解构它，这样你就应该做
const-Navigation=（{main}）
，然后你只需要做
{main}
。你得到了什么错误？您提供的代码为我工作。您提供的代码是功能性的：这不解决OP正在进行的问题/场景，也不考虑是否需要将多个JSX作为道具传递给组件。fragment@DominikMatis我会澄清，多个jsx可以在组件的渲染函数中的不同位置使用