Question

让我们假设我们必须在React中设计一些组件。我们要设计一个项目预览页面。我们有一些清单，比方说书店中的书籍清单，然后单击一个项目，然后导航到书籍预览。这是我们要设计的组件。

初学者通常以单个BookPreviewComponent.js文件开头。他们将放置一些JSX来显示书名，图像和说明，并开始编写从Web服务获取书详细信息的逻辑，或者将组件连接到Redux商店。

所以这个：

___________________________________
|                                 |
|   The old man and the sea       |
|   Ernest Hemingway              |
|                                 |
|   |------------|   description  |
|   | xx image xx|       of       |
|   | xx image xx|     a book     |
|   | xx image xx|                |
|   |------------|                |
|                                 |
|_________________________________|

通常会转变成这样的东西：

import Card, { CardContent, CardHeader, CardMedia } from "material-ui/Card";
import React, { Component } from "react";
import { connect } from "react-redux";

const styles = {
  card: {
    width: "100%",
    maxWidth: theme.breakpoints.values.lg - theme.spacing.unit * 6,
    margin: theme.spacing.unit * 3,
    [theme.breakpoints.down("xs")]: {
      margin: theme.spacing.unit * 2,
    },
  };

class BookPreviewComponent extends Component {

  render() {
    const { classes, bookData } = this.props;

    return (
      <div >
        {bookData && (
          <Card className={classes.card}>
             <CardHeader title={bookData.title} />
             etc...
             BUT HERE'S A LOT OF STUFF
          </Card>
        }
      </div>
    );
  }
}

BookPreviewComponent .propTypes = {
  bookData: PropTypes.object.isRequired,
};

export const BookPreviewComponent = connect(
  state => ({
    bookData: state.bookblah
  }),
  { something else}
));

我们显然可以创建多个组件，例如BookPreviewDescriptionComponent，但它们实际上不是真正的组件，因为它们不会在BookPreviewComponent之外的其他任何地方使用。

我们可以生成一些小的函数，这些函数将返回组件的一部分。但这只会有所帮助。

那么在这个领域如何组织复杂的项目？我们如何设计这样的预览页面是干净的和可维护的？如何设计这样的组件以同时实现可读性和可维护性？

在React中应该如何构造项目预览组件？

0 个答案: