Question

我正在阅读React文档，他们建议您首先构建应用程序的静态版本。这是直接引用：

最简单的方法是构建一个可以获取数据模型的版本呈现UI但没有交互性。要构建呈现数据模型的应用程序的静态版本，您需要构建可重用其他组件并使用props传递数据的组件。

我不是100％清楚我将如何以有效的方式实现这一点。我不是React的新手，但之前没有采用过这种特定的方法，并且想尝试一下。

我的想法是我使用模拟数据，并在构建应用程序时将其作为道具传递给其他组件。例如，让我们看一下我将要构建的真实组件，称为“患者”。忽略JSON格式，它将在真实应用程序中以常规JS对象表示法。

std::any

当他们谈论将数据模型作为道具传递时，这是什么意思？一旦你为应用程序中的所有组件构建了所有这些东西，那么你是否应该循环回来然后将所有这些组件连接到Redux并实现你的AJAX调用？

任何帮助都将不胜感激。

Answer 1

是的，您的理解是正确的，您首先制作单个组件，然后再次重复使用它。为了更好地澄清，请添加到您的示例中 - 我们只是说<TableRow>是您用于呈现单个表行的组件，然后您将执行类似于PatientsSortableTable类

的组件

import React, { Component } from 'react'

export default class PatientsSortableTable extends Component {
    render() {
        const patients = this.props.patients.map((patient) => <TableRow patient={patient}/>)
        return (
            <div>
                {patients}
            </div>
        )
    }
}

在你的TableRow中它可以是一个无状态的组件，如：

//假设您的患者是具有这些键的对象

export const TableRow = (props) => {
    const { name, age, gender } = props.patient
    return(
        <div>
            <div>{name}</div>
            <div>{age}</div>
            <div>{gender}</div>            
        </div>
    )
}

所以假设您有一些重要的患者列表，那么您将重用TableRow组件

构建React应用程序的静态版本

1 个答案: