Question

这是我简单的 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>。在英雄里面标记。我该如何解决这个问题？

Answer 1

好吧，我为此创建了一支笔，但是它没有保存，因此我将在此处添加代码。看起来您正在为相对简单的概念采用困难的方法。将道具传递到组件时，可以使用 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;

ReactJS未呈现子级

1 个答案: