添加我的组件后页面变为白色

Question

我正在使用 react-bootstrap。我正在尝试显示卡片列表。列表大小可能会有所不同。但是在“仪表板页面”底部添加组件“网站”后，整个页面变为白色。 {this.state.page === 'websites' ? this.websites : null}

网站组件

import * as React from 'react'
import { Card } from 'react-bootstrap'
import './Websites.css'

export default class Websites extends React.Component {
  constructor(props) {
    super(props)
    this.websites = []
    this.getWebsites()
  }

  getWebsites () {
    // TODO: Need Implementation
    var websites = this.makeTestWebsites()
    for (var i = 0; i < websites.length; i++) {
      this.websites.push(
        <Card>
          <Card.Body>
            <Card.SubTitle>{websites[i].domain}</Card.SubTitle>
            <Card.Title>{websites[i].name}</Card.Title>
            <Card.SubTitle>{websites[i].websiteClass}</Card.SubTitle>
            <Card.SubTitle>{websites[i].created}</Card.SubTitle>
          </Card.Body>
        </Card>
      )
    }
  }

  makeTestWebsites () {
    return [
      {
        name: 'test domain',
        domain: 'domain.com',
        websiteClass: 'starter',
        created: '2077-12-05'
      },
      {
        name: 'hello domain',
        domain: 'chicken.org',
        websiteClass: 'premium',
        created: '1996-02-12'
      }
    ]
  }

  render () {
    return (
      <div>
        {this.websites}
      </div>
    )
  }
}

从 DashboardPage

调用

import * as React from 'react'
import { Button } from 'react-bootstrap'
import './dashboardStyle.css'
import Websites from './Websites'

export default class DashboardPage extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      page: 'websites'
    }
    this.websites = <Websites />
    this.switchToWebsites()
  }

  switchToWebsites () {
    this.setState({ page: 'websites' })
  }

  render () {
    return (
      <div>
        <div className='sidemenu'>
          <Button variant='primary' className='sidenav-button'>
            <img
              alt=''
              src='/logo/xxxLogo.png'
              width='30'
              height='30'
              className='sidenav-button-icon'
              onClick={this.showLandingPage}
            />
            Websites
          </Button>
          <Button variant='primary' className='sidenav-button'>
            <img
              alt=''
              src='/logo/xxxLogo.png'
              width='30'
              height='30'
              className='sidenav-button-icon'
              onClick={this.showLandingPage}
            />
            Email
          </Button>
          <Button variant='primary' className='sidenav-button'>
            <img
              alt=''
              src='/logo/xxxLogo.png'
              width='30'
              height='30'
              className='sidenav-button-icon'
              onClick={this.showLandingPage}
            />
            How To Use
          </Button>
          <Button variant='primary' className='sidenav-button'>
            <img
              alt=''
              src='/logo/xxxLogo.png'
              width='30'
              height='30'
              className='sidenav-button-icon'
              onClick={this.showLandingPage}
            />
            Support
          </Button>
        </div>
        <div className='right-menu'>
          {this.state.page === 'websites' ? this.websites : null}
        </div>
      </div>
    )
  }
}

抱歉，有些细节。我是新人，不知道你需要什么信息。如果您需要任何详细信息，请发表评论。谢谢。

编辑：来自控制台的错误日志

未捕获的不变违规：元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：未定义。

Answer 1

试试这个：

网站组件

import React from "react";
import { Card } from "react-bootstrap";
import "./Websites.css";

const testWebsites = [
  {
    name: "test domain",
    domain: "domain.com",
    websiteClass: "starter",
    created: "2077-12-05"
  },
  {
    name: "hello domain",
    domain: "chicken.org",
    websiteClass: "premium",
    created: "1996-02-12"
  }
];

export default class Websites extends React.Component {
  constructor(props) {
    super(props);

    // TODO: Need Implementation
    this.state = {
      websites: testWebsites
    };
  }

  render() {
    return (
      <div>
        {this.state.websites.map(website => (
          <Card key={website.name}>
            <Card.Body>
              <Card.SubTitle>{website.domain}</Card.SubTitle>
              <Card.Title>{website.name}</Card.Title>
              <Card.SubTitle>{website.websiteClass}</Card.SubTitle>
              <Card.SubTitle>{website.created}</Card.SubTitle>
            </Card.Body>
          </Card>
        ))}
      </div>
    );
  }
}

仪表板组件

import React from "react";
import { Button } from "react-bootstrap";
import "./dashboardStyle.css";
import Websites from "./Websites";

export default class DashboardPage extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      page: "websites"
    };
  }

  showLandingPage = () => {
    this.setState({
      page: "landing"
    });
  };

  showWebsitesPage = () => {
    this.setState({
      page: "websites"
    });
  };

  render() {
    return (
      <div>
        <div className="sidemenu">
          <Button
            variant="primary"
            className="sidenav-button"
            onClick={this.showLandingPage}
          >
            <img
              alt=""
              src="/logo/BornBee Logo.png"
              width="30"
              height="30"
              className="sidenav-button-icon"
            />
            Websites
          </Button>
          <Button
            variant="primary"
            className="sidenav-button"
            onClick={this.showLandingPage}
          >
            <img
              alt=""
              src="/logo/BornBee Logo.png"
              width="30"
              height="30"
              className="sidenav-button-icon"
            />
            Email
          </Button>
          <Button
            variant="primary"
            className="sidenav-button"
            onClick={this.showLandingPage}
          >
            <img
              alt=""
              src="/logo/BornBee Logo.png"
              width="30"
              height="30"
              className="sidenav-button-icon"
            />
            How To Use
          </Button>
          <Button
            variant="primary"
            className="sidenav-button"
            onClick={this.showLandingPage}
          >
            <img
              alt=""
              src="/logo/BornBee Logo.png"
              width="30"
              height="30"
              className="sidenav-button-icon"
            />
            Support
          </Button>
        </div>
        <div className="right-menu">
          {this.state.page === "websites" ? <Websites /> : null}
        </div>
      </div>
    );
  }
}

---

我对您的代码做了一些值得注意的更改。

网站

1. 将测试数据移出组件
2. 使用this.state 代替类属性
3. map 在数据数组上。 注意：key 属性必须是唯一的 (source)
4. 更改您的 React 导入。我不确定通配符导入是否是一个错误，但我从未见过这样做。

仪表板

1. 不要在构造函数中调用setState (source)
2. 不要将组件存储在属性变量中
3. 我将您的onClick 移至<Button> 组件，因为这对我来说更有意义。但是，如果您喜欢或需要它，可以将其移回img。
4. 让你的类方法箭头函数绑定this

我建议的最后一件事是，与其像您正在做的那样手动处理页面路由，不如使用React Router。