在 JSX 中使用 React 的 If 语句

Posted 2023-02-21

【中文标题】在 JSX 中使用 React 的 If 语句

【英文标题】：If statements inside JSX with React

【发布时间】：2017-04-03 01:22:57

【问题描述】：

我正在尝试从数组中创建一个 React 列表。我已经做到了

const persons = [
   name: 'A', website: 'http://google.com' ,
   name: 'B', email: '[e-mail]' ,
];

const listItems = persons.map((person, i) =>
  <div className="card" key=i>
    <div className="card-block">
      <h4 className="card-title">person.name</h4>
    </div>
    <ul className="list-group list-group-flush">
      <a href="person.website" className="list-group-item">person.website</a>
      <a href="mailto:person.email" className="list-group-item">person.email</a>
    </ul>
  </div>
);

const PersonList = () => (
  <div className="card-deck-wrapper">
    listItems
  </div>
);

问题在于数据各不相同，因此有些人没有电子邮件，有些人没有网站，有些人也没有。

所以如果一个人都没有，这个块

    <ul className="list-group list-group-flush">
      <a href="person.website" className="list-group-item">person.website</a>
      <a href="mailto:person.email" className="list-group-item">person.email</a>
    </ul>

应该完全省略。

如果此人没有电子邮件，则应省略电子邮件链接，如果他/她没有网站，则应省略此链接。

所以我的 JSX 中需要一些 if 语句。

我想要的是这样的

const listItems = persons.map((person, i) =>
  <div className="card" key=i>
    <div className="card-block">
      <h4 className="card-title">person.name</h4>
    </div>
    if (person.website || person.email) 
      <ul className="list-group list-group-flush">
        if (person.website) 
          <a href="person.website" className="list-group-item">person.website</a>
        
        if (person.email) 
          <a href="mailto:person.email" className="list-group-item">person.email</a>
        
      </ul>
    
  </div>
);

但它不是有效的 JSX。

【参考方案1】：

您可以使用大括号 + && 来实现。

const listItems = persons.map((person, i) =>
  <div className="card" key=i>
    <div className="card-block">
      <h4 className="card-title">person.name</h4>
    </div>
     (person.website || person.email) &&
         <ul className="list-group list-group-flush">
           person.website && <a href=person.website className="list-group-item">person.website</a>
           person.email && <a href="mailto:" + person.email className="list-group-item">person.email</a>
        </ul>
    
  </div>
);

jsfiddle

const persons = [
   name: 'A', website: 'http://google.com' ,
   name: 'B', email: '[e-mail]' ,
   name: "No Email No Website"
];

const listItems = persons.map((person, i) =>
  <div className="card" key=i>
    <div className="card-block">
      <h4 className="card-title">person.name</h4>
    </div>
     (person.website || person.email) &&
         <ul className="list-group list-group-flush">
           person.website && <a href=person.website className="list-group-item">person.website</a>
           person.email && <a href="mailto:" + person.email className="list-group-item">person.email</a>
   			 </ul>
    
  </div>
);

const PersonList = () => (
  <div className="card-deck-wrapper">
    listItems
  </div>
);

ReactDOM.render(
  <PersonList />,
  document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>

【参考方案2】：

您可以使用三元运算符和条件运算符（&&、||、===、!=）来实现相同的效果

 
  (person.website || person.email) ? some View when condition is true
   : 
   some View when condition is false

【参考方案3】：

if 语句不能使用 JSX 块，请使用三元运算符：

const listItems = persons.map((person, i) =>
  <div className="card" key=i>
    <div className="card-block">
      <h4 className="card-title">person.name</h4>
    </div>
    person.website || person.email ? (
      <ul className="list-group list-group-flush">
        person.website ? <a href=person.website className="list-group-item">person.website</a> : null
        person.email ? <a href=person.email className="list-group-item">person.email</a> : null
      </ul>
    ) : null
  </div>
);