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

Question

我想在课程数组为空时隐藏一个 table 元素。我希望下面的代码可以工作，但它没有。有任何想法吗？有问题的代码行是：

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

Answer 1

似乎没有必要在这里应用动态 class，但为什么不只是 return 一个空元素 (<span />) 而不是 table 本身？

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

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

隐藏它们

Answer 2

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

此语法完成了我最初打算做的事情。也就是说，lux 的答案是更好的解决方案。所以我同意了。谢谢 lux.

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

JSX, hide an element using inline ternary operator?

jsx

reactjs