时间戳

首页 > 解决方案 > 在 React 中使用按钮进行条件渲染

reactjs - 在 React 中使用按钮进行条件渲染

问题描述

与 React 合作了几个星期，我正在尝试让条件渲染工作。我正在处理一个有几行的表，其中每一行都有一个“编辑”和“删除”按钮。在值为false的“安全”列上，我希望两个按钮都不显示。我试图将按钮渲染为隐藏，并且通过一些逻辑，如果道具不为假，按钮将显示。我在另一段代码上使用了 ConfigComponent，我在其中显示了所有表值。

见下表：

const ConfigComponent = (props) => {
console.log(props.secured)
if (props.secured !== true) {
    return (
    <tr>
        <td>{props.configCategory}</td>
        <td>{props.configValue}</td>
        <td>{props.description}</td>
        <td>{props.configTypeId}</td>
        <td>{props.dataTypeId}</td>
        <td>{props.secured}</td>
        <td>{props.createdDate}</td>
        <td>{props.modifiedDate}</td>
        <td>{props.modifiedBy}</td>
        <td>{props.id}</td>
        <td><button type="button" class="btn btn-sm btn-primary" hidden={!props.secured} onClick={() => props.onClick(props.id)}>Edit</button></td>
        <td><button type="button" class="btn btn-sm btn-danger" hidden={!props.secured} onClick={() => props.onDelete(props.id)}>Delete</button></td> 
    </tr>
    )} 
else {
        return (
        <tr>
            <td>{props.configCategory}</td>
            <td>{props.configValue}</td>
            <td>{props.description}</td>
            <td>{props.configTypeId}</td>
            <td>{props.dataTypeId}</td>
            <td>{props.secured}</td>
            <td>{props.createdDate}</td>
            <td>{props.modifiedDate}</td>
            <td>{props.modifiedBy}</td>
            <td>{props.id}</td>
        </tr>
        )}
}


render() {
    let configList = this.state.configList
    return (
        <React.Fragment>
            <h3 class="font-weight-bold py-3 mb-4">Config List</h3>
            <table className="table">
                <thead>
                    <tr>
                        <th>Config Category</th>
                        <th>Config Value</th>
                        <th>Description</th>
                        <th>ConfigTypeId</th>
                        <th>DataTypeId</th>
                        <th>Secured</th>
                        <th>Created Date</th>
                        <th>Modified Date</th>
                        <th>Modified By</th>
                        <th>ID</th>
                    </tr>
                </thead>
                <tbody>
                    {configList.map((config, i) => {
                        return (
                            <React.Fragment key={i}>
                                <ConfigComponent
                                    key={config.id}
                                    id={config.id}
                                    configCategory={config.configCategory}
                                    configValue={config.configValue}
                                    description={config.description}
                                    configTypeId={config.configTypeId}
                                    dataTypeId={config.dataTypeId}
                                    secured={(config.secured).toString()}
                                    createdDate={moment(config.createdDate).format("YYYY-MM-DD")}
                                    modifiedDate={moment(config.modifiedDate).format("YYYY-MM-DD")}
                                    modifiedBy={config.modifiedBy}
                                    onClick={this.editClick}
                                    onDelete={this.deleteClick} />
                            </React.Fragment>
                        )
                    })}
                </tbody>
            </table>
        </React.Fragment>
    )
}

标签： reactjs

解决方案

我不确定你的问题是什么......

你对字符串进行强制转换

secured={(config.secured).toString()}

但是然后你检查一个明确的“真”

if (props.secured !== true)

我认为这将始终返回 false，删除强制转换 toString() 应该会带来更好的行为

推荐阅读