Javascript ReactJS没有呈现子对象

这是我简单的home.js代码。未删除任何相关代码

import Banner from '../components/Banner'
export default function Home() {
    return (
        <Hero> 
            <Banner title="luxurious rooms" subtitle="delux rooms starting at $299">
                <Link to="/rooms" className="btn-primary">
                    Our rooms
            </Link>
            </Banner>
        </Hero> 

从“../components/Banner”导入横幅
导出默认函数Home（）{
返回(
我们的房间

这是我的banner.js

import React from 'react'

export default function Banner({childern,title,subtitle}) {
    return (
        <div className="banner">
            <h1>{title}</h1>
            <div />>
            <p>{subtitle}</p>
            {childern}
        </div>
    )
}

从“React”导入React
导出默认函数标题（{childern，title，subtitle}）{
返回(
{title}
>
{副标题}

{childern}
)
}

我不明白为什么它没有渲染

在bedg中，我看到了英雄内部的

.tag。

---

如何解决此问题？

好的，我为此创建了一支笔，但它没有保存，因此我将在此处添加代码。看起来您对一个相对简单的概念采取了一种困难的方法。当您将道具传递给组件时，您可以使用this.props.nameofp在该组件中访问它们。您不需要将链接作为chil传递d、 只需在子组件中添加链接，并将链接所需的信息作为道具传递

编辑：下面是一个工作示例

从“React”导入React；
从“react dom”导入react dom；
从“/Banner”导入横幅；
从“react Router dom”导入{BrowserRouter as Router}；
类应用程序扩展了React.Component{
render（）{
返回(
);
}
}
ReactDOM.render(
,
文档查询选择器（“app”）
);

那么你的横幅应该是这样的：

import React from "react";
import { Link } from "react-router-dom";

class Banner extends React.Component {
  render() {
    return (
      <div className="banner">
        <h1>{this.props.title}</h1>
        <p>{this.props.subtitle}</p>
        <Link 
          to={this.props.path} 
          className={this.props.classList}
        >
        Link Text (could also be a prop)
        </Link>
      </div>
    );
  }
}

export default Banner;

从“React”导入React；
从“react router dom”导入{Link}；
类标题扩展了React.Component{
render（）{
返回(
{this.props.title}
{this.props.subtitle}

链接文本（也可以是道具）
);
}
}
导出默认横幅；

你有什么错误吗？你犯了一个拼写错误。

childern

->

children

@Vencovskynope@AvinKavish是的，我已经修复了，谢谢，但仍然是相同的错误您还有一个额外的

import React from "react";
import { Link } from "react-router-dom";

class Banner extends React.Component {
  render() {
    return (
      <div className="banner">
        <h1>{this.props.title}</h1>
        <p>{this.props.subtitle}</p>
        <Link 
          to={this.props.path} 
          className={this.props.classList}
        >
        Link Text (could also be a prop)
        </Link>
      </div>
    );
  }
}

export default Banner;