реагировать на перенаправление навигационной ссылки при условии - PullRequest
Новая
       14

реагировать на перенаправление навигационной ссылки при условии

0 голосов
/ 25 мая 2020

У меня есть два значения в индексе данных: 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;

1 Ответ

1 голос
/ 25 мая 2020

Я не уверен, где находится ваша переменная isOnline, но в основном, если вы хотите отрендерить что-то условно, вы можете попробовать: 

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

Это будет отображать компонент <NavLink /> только тогда, когда isOnline ложно.
Это не единственный способ реализовать условный рендеринг в React, просто очень распространенный, и я думаю, что он подходит для вашего варианта использования.
Для получения более подробной информации вы можете обратиться к официальному документы относительно условного рендеринга.

Удачи!

...