在条件下反应导航链接重定向答案

【问题标题】：react nav link redirect on condition在条件下反应导航链接重定向
【发布时间】：2020-09-11 23:04:49
【问题描述】：

我在数据索引中有两个值：isOnline（true 和 false）。现在<NavLink /> 在true and false 上都呈现，但我只想在值为false 而不是true 时呈现。有没有可能这样做？如果值为true，我想隐藏超链接。超链接只能使用false 值呈现。目前它给了我关于真假的超链接。但我希望 true 值不与任何其他内容相关联，但 false 值应该是可点击的。

import React, { useEffect, useState } from 'react';
import {
    Tabs, Icon, Divider, Table, Button, Input, Row, Col,
} from 'antd';

import moment from 'moment';
import { NavLink, Redirect } from 'react-router-dom';
import { getAllLeads } from '../../shared/services/apiService';
import { isSuccess } from '../../shared/utils/jsHelper';
import routePaths from '../../shared/routePaths';

// rowSelection object indicates the need for row selection
const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    getCheckboxProps: (record) => ({
        disabled: record.name === 'Disabled User', // Column configuration not to be checked
        name: record.name,
    }),
};


const dateFormat = 'YYYY-MM-DD';

const Leads = () => {
    const [leadList, setLeadList] = useState([]);
    const columns = [
        {
            title: 'Sl no.',
            dataIndex: 'name',
            render: (name, record) =><span>{leadList.indexOf(record) + 1}</span>
        },
        {
            title: 'Date',
            dataIndex: 'createdAt',
        },
        {
            title: 'Name',
            dataIndex: 'name',
        },
        {
            title: 'Phone number',
            dataIndex: 'phone_number',
        },
        {
            title: 'Email id',
            dataIndex: 'email',
        },
        {
            title: 'Type',
            dataIndex: 'type',
        },
        {
            title: 'Comment',
            dataIndex: 'comment',
        },
        {
            title: 'Property name',
            dataIndex: 'propertyId.name',
            //render: (name, row) => {row.propertyId ? (<NavLink to={`${routePaths.PROPERTY}/${row.propertyId._id}`}>{name}</NavLink>) : null},
        },
        {
            title:'On-Line / Off-Line',
            dataIndex: 'isOnline',
            // render: (isOnline, row) => {
            //         if(!isOnline){
            //         <NavLink to={`${routePaths.LEADSFORM}/${row._id}`}> 
            //             {isOnline}
            //         </NavLink>
            //     }else{null}
            // }
            render: (isOnline, row) => <NavLink to={`${routePaths.LEADSFORM}/${row._id}`}>{isOnline}</NavLink>,
        }
    ];

    const [loading, setLoading] = useState(false);
    var tokenSession = localStorage.getItem('token');
    if(tokenSession!='undefined' && tokenSession == null){
        var setTokenSession =  true;
    }else{
        var setTokenSession =  false;
    }
    const [loggedDashOut, setDashLoggedOut] = useState(setTokenSession? true:false);
    if (loggedDashOut) {
         return <Redirect to={routePaths.LOGIN} />;
    }

    const getLeadsList = () => {
        setLoading(true);
        getAllLeads().then((resp) => {
            if (isSuccess(resp)) {
                setLeadList(resp.data.data);
            }
        }).finally(() => setLoading(false));
    };

    useEffect(() => {
        getLeadsList();
        return () => {};
    }, []);
    return (
        <Row className="row-pad">
            <Col xs={24} sm={24} md={8} lg={8} xl={8}><h3>Leads</h3></Col>
            <Col xs={24} sm={24} md={8} lg={8} xl={8}></Col>
            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
                <NavLink to={routePaths.LEADSFORM}>
                    <Button type="primary" className="btn-add">Add Leads</Button>
                </NavLink>
            </Col>
            <Divider />
            <Table pagination={{ pageSize: 10 }} columns={columns} dataSource={leadList} />
        </Row>
    );
};

export default Leads;

【问题讨论】：

标签： reactjs conditional-rendering

【解决方案1】：

我不确定你的 isOnline 变量在哪里，但基本上如果你想有条件地渲染一些东西，你可以试试：

return (
  ...
  {isOnline ? null : <NavLink />}
  ...
)

这将仅在 isOnline 为 false 时呈现 <NavLink /> 组件。
这不是在 React 中实现条件渲染的唯一方法，只是一种非常常见的方法，我认为它适合您的用例。
有关条件渲染的更多详细信息，您可以参考official docs。

祝你好运！

【讨论】：