时间戳

首页 > 解决方案 > ReactJS 没有渲染孩子

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>

这是我的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>
    )
}

我不明白为什么它不渲染。

在床上，我继续看到<banner>。英雄内部的标签。我该如何解决这个问题？

标签： javascriptreactjs

解决方案

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

编辑：这是一个工作示例https://codesandbox.io/embed/elegant-fast-m52bt

import React from "react";
import ReactDOM from "react-dom";
import Banner from "./Banner";
import { BrowserRouter as Router } from "react-router-dom";

class App extends React.Component {
  render() {
    return (
      <div>
        <Banner
          title={"luxurious rooms"}
          subtitle={"delux rooms starting at $299"}
          path={"/rooms"}
          classList={"btn-primary"}
        />
      </div>
    );
  }
}

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.querySelector("#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;

推荐阅读