我正在尝试使用 map 功能添加条件以显示电子邮件链接。
如果项目包含电子邮件,则显示它。
但是,它仍然无法正常工作,因为它应该显示“无链接”,控制台日志显示正确。如果有任何帮助,我将不胜感激。
import React, { Component } from 'react';
import listIcon from '../img/list-icon.svg';
class FaqList extends Component {
state = {
items: [
{ id: 1, name: "Lorem.", answer: "Lorem ipsum dolor sit amet, consectetur adipisicing elit.", email: "hello@email.com", expanded: false },
{ id: 2, name: "Lorem.", answer: "Lorem ipsum dolor sit amet, consectetur adipisicing elit.", expanded: false }
]
};
render() {
let link;
const isEmail = this.state.items.map(item => {
if (item.email) {
console.log(item.email); // showing email
link = 'show link';
} else {
link = 'no link';
}
});
return this.state.items.map(el => (
<div
key={el.id}
onClick={() => this.handleToggle(el.id)}
className={el.expanded ? "faq__columns--item--active faq__columns--item" : "faq__columns--item"}
>
<div className="faq__content">
<p className="mb-0">{el.answer}</p>
{link} // Template here
</div>
</div>
));
}
}
export default FaqList;
最佳答案
不需要 isEmail,使用 jsx power 你可以像这样在渲染中的 map 函数中控制电子邮件链接的可见性:
render() {
return (
<div>
{this.state.items.map(el => (
<div
key={el.id}
onClick={() => this.handleToggle(el.id)}
className={
el.expanded
? 'faq__columns--item--active faq__columns--item'
: 'faq__columns--item'
}
>
<div className="faq__content">
<p className="mb-0">{el.answer}</p>
{el.email && <div>email: {el.email}</div>}
</div>
</div>
))}
</div>
);
}
关于javascript - react map 功能如果其他条件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58520875/