如何在箭头函数中进行条件渲染？

Question

我是箭头函数的新手，我正在为用户开发一个应用程序，我正在为此使用 React 模板，在我的应用程序中还有登录和注销系统，我将注销按钮放在该模板的页脚中，我是面临一个问题，每当用户访问网站然后在登录用户之前看到注销按钮，因为该按钮在页脚中所以我想要的是根据存储在会话中的电子邮件消失注销按钮我的意思是如果会话有用户电子邮件然后注销按钮出现在页脚否则用户看不到注销按钮这里是页脚的代码

import React from 'react';
import PropTypes from 'prop-types';
const email = session.getitem('user.email');
const FooterText = (props) => (

    
    
    
    <React.Fragment>

    
<br/><br/>
 <div className="hr-text hr-text-center my-2" > 
// i want to put check here that if session have user email then show that button other vise disappear
<button onClick={logout}>Logout</button> 
 </div> 


        &copy; { props.year } All Rights Reserved. 
        Designed and implemented by{' '}
        <a
            href="http://aliraza"
            target="_blank"
            rel="noopener noreferrer"
            className="sidebar__link"
        >
            ali raza
        </a>
    </React.Fragment>
)
FooterText.propTypes = {
    year: PropTypes.node,
    name: PropTypes.node,
    desc: PropTypes.node,
};
FooterText.defaultProps = {
    year: "2020",
    name: "Admin Theme",
    desc: "Bootstrap 4, React 16 (latest) & NPM"
};

export { FooterText };

我想在这里检查一下，如果会话有用户电子邮件，则显示该按钮其他虎钳消失但在箭头功能中我正在努力使用 if else 语句我们该怎么做？

Answer 1

您可以像下面那样应用检查您可以使用三元运算符来检查条件

 import React from 'react';
import PropTypes from 'prop-types';
const email = session.getitem('user.email');
const FooterText = (props) => (

    
    
    
    <React.Fragment>

    
<br/><br/>
 <div className="hr-text hr-text-center my-2" > 
// i want to put check here that if session have user email then show that button other vise disappear
{email?(<button onClick={logout}>Logout</button>):null} 
 </div> 


        &copy; { props.year } All Rights Reserved. 
        Designed and implemented by{' '}
        <a
            href="http://aliraza"
            target="_blank"
            rel="noopener noreferrer"
            className="sidebar__link"
        >
            ali raza
        </a>
    </React.Fragment>
)
FooterText.propTypes = {
    year: PropTypes.node,
    name: PropTypes.node,
    desc: PropTypes.node,
};
FooterText.defaultProps = {
    year: "2020",
    name: "Admin Theme",
    desc: "Bootstrap 4, React 16 (latest) & NPM"
};

export { FooterText };

Answer 2

您可以尝试React方式：

{condition && <button onClick={logout}>Logout</button>}

如果条件为真，则显示按钮，否则不显示任何内容。

React Conditinal Rendering

如何在箭头函数中进行条件渲染？

how to do conditional rendering in arrow function?

javascript

reactjs

arrow-functions