JSX、インライン三項演算子を使用して要素を非表示にしますか？

Question

コースの配列が空のときにテーブル要素を非表示にしたいとします。私は以下のコードがうまくいくことを期待していましたが、そうではありません。何か案は？問題のコードの行は次のとおりです。

<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

ここは動的クラスを適用する必要はないようですが、なぜ単にテーブル自体の代わりに空の要素（<span />）を返さないのですか？

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

これは、実際にDOMから要素を削除することができるように、Reactではかなり一般的なアプローチです（CSSで隠すことと反対）。

Answer 2

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

この構文は、私が最初にやるために着手したものを実現しています。つまり、ルックスの答えはより良い解決策です。だから私はそれに行きました。ありがとうございました。