Question

与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>
    )
}

Answer 1

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

您强制转换为字符串

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

但随后您要检查一个明确的“ true”

if (props.secured !== true)

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

Answer 2

<td><button type="button" class="btn btn-sm btn-primary" hidden={!props.secured} onClick={() => props.onClick(props.id)}>Edit</button></td>

仅当props.secured！== true时才调用此行，如果条件则在内部。这意味着每次隐藏都会是真实的，并且不会改变。

Answer 3

首先，您不需要else语句，其次，我看不到react给按钮提供了“隐藏”属性。您应该尝试-

const ConfigComponent = (props) => { console.log(props.secured)
    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> {props.secured === true ?
        <td><button type="button" class="btn btn-sm btn-primary"  onClick={() => props.onClick(props.id)}>Edit</button></td>
        <td><button type="button" class="btn btn-sm btn-danger"  onClick={() => props.onDelete(props.id)}>Delete</button></td> : ""}
    </tr> ) }

Answer 4

此答案可能会在将来对某人有所帮助，无需使用 ConfigComponent ，请尝试：

 <tbody>
    {configList.map((config, i) => {
       <tr>
          <td>{config.configCategory}</td>
          <td>{config.configValue}</td>
          <td>{config.description}</td>
          <td>{config.configTypeId}</td>
          <td>{config.dataTypeId}</td>
          <td>{config.secured}</td>
          <td>{config.createdDate}</td>
          <td>{config.modifiedDate}</td>
          <td>{config.modifiedBy}</td>
          <td>{config.id}</td>
          {config.secured &&
          <>
          <td><button type="button" class="btn btn-sm btn-primary" onClick={() => props.onClick(config.id)}>Edit</button></td>
          <td><button type="button" class="btn btn-sm btn-danger" onClick={() => props.onDelete(config.id)}>Delete</button></td> 
          </>
          }
      </tr>
    })}
 </tbody>

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

4 个答案: