JSX，使用内联三元运算符隐藏元素？答案

【问题标题】：JSX, hide an element using inline ternary operator?JSX，使用内联三元运算符隐藏元素？
【发布时间】：2016-10-24 22:14:46
【问题描述】：

我想在课程数组为空时隐藏表格元素。我希望下面的代码可以工作，但事实并非如此。有任何想法吗？有问题的代码行是：

<table className="table" style={courses.length > 0 ? 'show' : 'display:none'}>

import React, {PropTypes} from 'react';
import CourseListRow from './CourseListRow';

const CourseList = ({courses, onDelete}) => {
  return (
    <table className="table" style={courses.length > 0 ? 'show' : 'display:none'}>
      <thead>
      <tr>
        <th>&nbsp;</th>
        <th>Title</th>
        <th>Author</th>
        <th>Category</th>
        <th>Length</th>
      </tr>
      </thead>
      <tbody>
      {courses.map(course =>
        <CourseListRow key={course.id} course={course} onDelete={onDelete}/>
      )}
      </tbody>
    </table>
  );
};

CourseList.propTypes = {
  courses: PropTypes.array.isRequired
};

export default CourseList;

【问题讨论】：

如何在没有三元运算符的情况下将内联样式应用于反应组件？

标签： reactjs jsx

【解决方案1】：

<table className="table" style={courses.length > 0 ? 'display: '' : 'display:none'}>

这个语法完成了我最初打算做的事情。也就是说，勒克斯的答案是一个更好的解决方案。所以我就这么做了。谢谢勒克斯。

【讨论】：

绝对仍然是一种有效的方法；经常通过道具翻转课程。
在这种情况下，从 DOM 中删除不必要的元素似乎是一个更好的解决方案

【解决方案2】：

这里似乎没有必要应用动态类，但为什么不只返回一个空元素 (<span />) 而不是表本身呢？

const CourseList = ({courses, onDelete}) => {
      if (courses.length === 0) 
          return <span />
      }
      return (
          <table className="table">
              ...
          </table>
      );
};

这是 React 中相当常见的方法，因为它允许从 DOM 中实际删除元素，而不是用 CSS 隐藏它们。

【讨论】：