javascript - React JS - 如何优化渲染代码？

Question

我的渲染函数中有这段代码，但我有 5 个不同的版本，其中 html 略有更改。我用 5 个表中的每一个创建了新表。我如何优化它，这样我就不必重复大量 html/js 代码？

<table>
    <thead>
        <tr>
            <th></th>
            <th className='desc-col'>Description</th>
            <th className='button-col'>Amount</th>
        </tr>
    </thead>
    <tbody> { this.showData
        this.state.data.map((exp) => {
        if (exp.typeOfItem === "Asset" && exp.term == "Short-Term" ) {
        return <tr>
            <td className='counterCell'></td>
            <td className='desc-col'>{exp.description}</td>
            <td className='button-col'>${exp.amount}</td>
            <td className='button-col'>
                <Update expense={exp} />
            </td>
            <td className='button-col'>
                <Delete expense={exp} />
            </td>
        </tr>
        }
        })
        }
    </tbody>
</table>

<table>
    <thead>
        <tr>
            <th></th>
            <th className='desc-col'>Description</th>
            <th className='button-col'>Amount</th>
        </tr>
    </thead>
    <tbody>
        {
        this.state.data.map((exp) => {
        if (exp.typeOfItem === "Asset" && exp.term == "Long-Term" ) {
        return <tr>
            <td className='counterCell'></td>
            <td className='desc-col'>{exp.description}</td>
            <td className='button-col'>${exp.amount}</td>
            <td className='button-col'>
                <Update expense={exp} />
            </td>
            <td className='button-col'>
                <Delete expense={exp} />
            </td>
        </tr>
        }
        })
        }
    </tbody>
</table>

Answer 1

您可以在自定义组件中提取Table，并将数据作为props传递，

您的新组件将是，

import React from 'react'

const TableComponent = (props) => (
    <table>
        <thead>
            <tr>
                <th></th><th className='desc-col'>Description</th>
                <th className='button-col'>Amount</th>
            </tr>
        </thead>
        <tbody>
            {
                props.data.map((exp) => {
                    if (exp.typeOfItem === props.typeOfItem && exp.term === props.term ) {
                        return <tr>
                            <td className='counterCell'></td>
                            <td className='desc-col'>{exp.description}</td>
                            <td className='button-col'>${exp.amount}</td>
                            <td className='button-col'> <Update expense={exp}/></td>
                            <td className='button-col'><Delete expense={exp} /></td>
                        </tr>
                    }
                })
            }
        </tbody>
    </table>
)

export default TableComponent

现在您可以通过传递 props 来渲染此组件，

<TableComponent data={this.state.data} typeOfItem="Asset" term="Short-Term"/>
<TableComponent data={this.state.data} typeOfItem="Asset" term="Long-Term"/>

注意:如果您要在 Table 中使用任何其他变量，请将它们作为 props 并在 TableComponent 中传递 适本地使用它们。