반응 부트 스트랩 구성 요소가 오류를 생성합니다

Question

반응 부트 스트랩과 관련된 다른 문제가 있지만 내 특정 오류는 본적이 없으므로 내 게시물이 이중성에 대한 검토 규칙을 통과하기를 바랍니다. 반응을 배우려고하고 CSS를위한 부트 스트랩 만 사용하고 싶습니다.

테이블 코드를 react-bootstrap documentation site에서 내 구성 요소로 복사했습니다. 라고 렌더링 할 때이 오류를 얻을 :

Uncaught Error: TableLayout.render(): A valid ReactComponent must be returned.

내 구성 요소는 다음과 같습니다

import React from 'react'; 
import Table from 'react-bootstrap'; 

console.log("render TableLayout 2"); 

class TableLayout extends React.Component { 
    render() { 
     return 
     <div> 
      <Table striped bordered condensed hover> 
       <thead> 
        <tr> 
        <th>#</th> 
        <th>First Name</th> 
        <th>Last Name</th> 
        <th>Username</th> 
        </tr> 
       </thead> 
      </Table> 
     </div> 
    } 
} 
export default TableLayout; 

내가 호출 나의 app.js를 통해 같은 :

import React from 'react'; 
import { render } from 'react-dom'; 
import TableLayout from './TableLayout.jsx'; 

render(
    <TableLayout />, 
    document.getElementById('app') 
); 

모든 아이디어를 어떻게 이 구현에 문제가 있습니까?

당신은 당신의 JSX는 어느 쪽도 return 문 같은 줄에서 시작하지 않기 때문에 실제로는 아무 것도 반환하지 않는,도 괄호에 싸여 오류 상태처럼 당신에게 매트

Answer 1

감사드립니다.

return; // returns nothing 

<div> 
    ... 
</div> 

이 시도 :

render() { 
    return (
    <div> 
     <Table striped bordered condensed hover> 
     <thead> 
      <tr> 
      <th>#</th> 
      <th>First Name</th> 
      <th>Last Name</th> 
      <th>Username</th> 
      </tr> 
     </thead> 
     </Table> 
    </div> 
); 
}