Question

根据状态编号，我需要填充批准和拒绝图标。在响应中，您可以看到状态为1的响应数字，我需要填充ICons

this.state = {
 listapproval: {
            contracts: '',
        },
}

状态变量listapproval在图像中显示以下响应。我得到了回复

import React, { Component } from "react";
import { Link, browserHistory } from 'react-router';
   import * as TemplateAction from '../../actions/templateAction.jsx';
import TemplateStore from '../../store/templateStore.jsx';
import * as ClientAction from '../../actions/clientAction.jsx';
 import ClientStore from '../../store/clientStore.jsx';
import * as ContractAction from '../../actions/contractAction.jsx';
import ContractStore from '../../store/contractStore.jsx';
import * as UserAction from '../../actions/userAction.jsx';
import UserStore from '../../store/userStore.jsx';
import Dialog from 'material-ui/Dialog';

export default class ClickableRenderer extends Component {
constructor(props) {
    super(props);

    this.state = {
        cell: {
            row: this.props.value,
            col: this.props.colDef.headerName
        },
        text: '',
        openrejectDialog: false,
        openrejectedcomment: false,
        contractlist: {

        },
        singlecontract: {
            contract: {
                rejectionReason: ''
            }
        },

        rejectionsinglecontract: {
            contract: {
                rejectionReason: ''
            }
        },
        clientdetails: [],
        listapproval: {
            contracts: [],
        },
        userroleslist: {
            user: {
                role: {
                    permission: [],
                    name: '',
                },
            }
        },
    };

    this.clicked = this.clicked.bind(this);
    this.rejectClicked = this.rejectClicked.bind(this);
    this._templateStoreChange = this._templateStoreChange.bind(this);
    this._contractStoreChange = this._contractStoreChange.bind(this);
    this._clientStoreChange = this._clientStoreChange.bind(this);
    this._handleContractSelection = this._handleContractSelection.bind(this);
    this._getSingleContract = this._getSingleContract.bind(this);
    this._userStoreChange = this._userStoreChange.bind(this);
    this.handleChange = this.handleChange.bind(this);

}

componentWillMount() {
    TemplateStore.on('change', this._templateStoreChange);
    ContractStore.on('change', this._contractStoreChange);
    ClientStore.on('change', this._clientStoreChange);
    UserStore.on('change', this._userStoreChange);
}

componentWillUnmount() {
    TemplateStore.removeListener('change', this._templateStoreChange);
    ContractStore.removeListener('change', this._contractStoreChange);
    ClientStore.removeListener('change', this._clientStoreChange);
    UserStore.removeListener('change', this._userStoreChange);
}

componentDidMount() {
    ContractAction._getContractList();
    UserAction._getUserRolesList();
    ContractAction._getListApprovals();
}

_templateStoreChange(type) {
    if (type == 'OrganizationList') {
        let organizationlist = TemplateStore._getOrganizionDetailsList() || {};
        this.setState({ organizationlist });
    }
    if (type == 'TemplateList') {
        let templatelist = TemplateStore._getTemplateDetailsList() || {};
        this.setState({ templatelist });
    }
}

_clientStoreChange(type) {
    if (type == 'ClientList') {
        let clientdetails = ClientStore._getClientDeatilsList() || {};
        this.setState({ clientdetails });
    }
}

_contractStoreChange(type) {
    if (type == 'ContractList') {
        let contractlist = ContractStore._getContractDetailsList() || {};
        this.setState({ contractlist });
    }

    if (type == 'SingleContract') {
        let singlecontract = ContractStore._getSingleContractDetails() || {};
        this.setState({ singlecontract });

    }

    if (type == 'ListApprovals') {
        let listapproval = ContractStore._getApprovalsList() || {};

        this.setState({ listapproval });
    }

    if (type == 'RejectionSingleContract') {
        let rejectionsinglecontract = ContractStore._rejectionsinglecontract() || {};
        this.setState({ rejectionsinglecontract });

    }



}
_userStoreChange(type) {
    if (type == 'UserList') {
        let userdetails = UserStore._getUserDetailsList() || {};
        this.setState({ userdetails });
    }
    if (type == 'RolesList') {
        let roleslist = UserStore._getRolesList() || {};
        this.setState({ roleslist });
    }

    if (type == 'UserRolesList') {
        let userroleslist = UserStore._getUserRolesList() || {};
        this.setState({ userroleslist });
    }
}

 _getSingleContract(id) {

    let data = {
        id: this.state.cell.row,
    };
    localStorage.setItem("contractIdforview", data.id);
    ContractAction._getSingleContract(data);

}

render() {
    let roleslist = this.state.userroleslist.user.role.permission || {};
    let userroleslistname = this.state.userroleslist.user.role.name;
    let listapproval = this.state.listapproval.contracts;
    console.log(listapproval);
    let statusaprve = listapproval && listapproval.map(statusnum => (statusnum.status)) || {};
    console.log(statusaprve);




    return (
        <div>

            {
                roleslist.map((roles) => {
                    if (roles.moduleName == "Contracts" && roles.permissionName == "Read") {
                        return (
                            <Link to="/previewContract" title="preview" className=" mr-2" onClick={this._getSingleContract}>
                                <i className="fa fa-eye"></i>
                            </Link>

                        )
                    }
                })
            }



            {statusaprve === 1  ?
                 <a className="mr-2" title="Approve" onClick={this.clicked}><i className="fa fa-thumbs-up"></i></a>
                 : null}



            {statusaprve === 1 ?
                 <a type='button' title="Reject" className="mr-2" onClick={this._openrejectDialog.bind(this)}><i className="fa fa-ban"></i></a>
                : null}









        </div>
    );
}
}

statusaprve变量具有以下状态，如下图所示，我试图根据状态1填充批准和拒绝图标仍然没有填充图标？

Answer 1

有点难以分辨，因为ClickableRenderer类似乎用于渲染表格中的每个单元格（或其中一些单元格）。 let controller = self.storyboard!.instantiateViewController(withIdentifier: "tableVC") controller.viewDidLoad()被复制到this.props.value，可能是this.state.cell.row的索引，但我认为还有其他道具被传递，但该组件没有记录预期的道具。您可以在this.state.listapproval.contracts开头console.log(this.props)提供更好的主意，或者查看JSX，其中render()被实例化以查看传递的内容。

根据我所看到的，这里有一个替代ClickableRenderer可能会做你想要的。

render()

您似乎没有render() { let roleslist = this.state.userroleslist.user.role.permission || {}; let userroleslistname = this.state.userroleslist.user.role.name; let contracts = this.state.listapproval.contracts; return ( <div> { roleslist.map((roles) => { if (roles.moduleName == "Contracts" && roles.permissionName == "Read") { return ( <Link to="/previewContract" title="preview" className=" mr-2" onClick={this._getSingleContract}> <i className="fa fa-eye"></i> </Link> ) } ); if (contracts[this.props.value].status === 1) { <a className="mr-2" title="Approve" onClick={this._approveContract} > <i className="fa fa-thumbs-up"></i> </a> <a type='button' title="Reject" className="mr-2" onClick={this._openrejectDialog.bind(this)} > <i className="fa fa-ban"></i> </a> } } </div> ); }的处理程序，所以您需要决定如何处理。

我觉得你的代码非常模糊。您可能需要考虑添加_approveContract，因为这有助于记录和验证传递的道具。

PropTypes中的大部分内容似乎都是不必要的。阅读无状态组件，了解如何简化这一过程。

根据状态需要填充图标？

1 个答案: