Question

我正在尝试从数组中创建React中的列表。我用

完成了

const persons = [
  { name: 'A', website: 'http://google.com' },
  { name: 'B', email: 'b@google.com' },
];

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。

Answer 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

＆＃13;

const persons = [
  { name: 'A', website: 'http://google.com' },
  { name: 'B', email: 'b@google.com' },
  { 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')
);

＆＃13;

<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>

＆＃13;

Answer 2

您可以使用三元运算符和条件运算符（＆amp;＆amp;，||，===，！=）来实现相同的

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

Answer 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>
);

如果JSX里面的语句带有React

3 个答案: