將React元素導入到項目中

Question

我對ReactJS非常陌生，但我已經開始了工作，並且已經創建了我的第一個React項目，並且所有內容都很棒，非常喜歡使用React。

我用「JS完成」創建和測試我的代碼是 - https://jscomplete.com/repl

在此我創建了一個簡單的表格，拉一些JSON數據，並顯示它如何我需要在這偉大工程在線工具 - 這是我的代碼：

var shows = [ 
{ 
    id: 1, 
    show: 'Simpsons', 
    characters: [ 
    { id: 1, name: 'Bart Simpson', gender: 'Male'}, 
    { id: 2, name: 'Homer Simpson', gender: 'Male'}, 
    { id: 3, name: 'Ned Flanders', gender: 'Male'} 
] 
}, 
{ 
    id: 2, 
    show: 'Flintstones', 
    characters: [ 
    { id: 1, name: 'Fred Flintstone', gender: 'Male'}, 
    { id: 2, name: 'Barney Rubble', gender: 'Male'}, 
    { id: 3, name: 'Wilma Flintstone', gender: 'Female'} 
] 
} 
]; 

const ShowTable = (props) => { 
    return (
    <div> 
     <h3>{props.show}</h3> 
     <table> 
     {props.characters.map((char, index) => (
     <tr key={index}> 
      <td>{char.name}</td> 
      <td>{char.gender}</td> 
     </tr> 
      ))} 
     </table> 
     <hr /> 
    </div> 
); 
}; 

const ShowList = (props) => { 
    return (
    <div> 
     {props.cards.map(card => <ShowTable {...card} />)} 
    </div> 
); 
} 

ReactDOM.render(<ShowList cards={shows} />, mountNode); 

所以我現在需要做的就是在我的項目導入這一點，這就是我傾倒。

我已經創建了一個'頁面'React元素，它在我的表中拉動React元素 - 我做了一些測試，拉動一個靜態的React元素，它只是說'Hello World'工作正常，所以接下來我嘗試插入代碼在上面的React元素中，將最後一行更改爲此;

export default (ShowList cards={shows}); 

哪......在我的頭應該工作，但我有一種感覺，這就是我要去哪裏錯了，測試的瀏覽器我得到一個語法錯誤上最後一行所以我猜我我做了一些錯誤的事情，但是這對我來說很好，如果有人能指出我做錯了什麼，我會非常感激！

此外，我覺得我的問題的標題對於任何未來可能遇到此問題的人都不是很有幫助 - 歡迎提供更好的建議！ :-)

ň

Answer 1

該組件是ShowList，所以你會export default ShowList。

然後使用import ShowList from "ShowList.js"導入它。

並使用<ShowList cards={shows}/>執行它，其中shows在導入ShowList的組件中定義。

ShowList.js

class ShowList extends Component { 
    render() { 
    return (
     <div> 
     {props.cards.map(card => <ShowTable {...card} />)} 
     </div> 
    ); 
    } 
} 

export default ShowList; 

ShowListParent.js

import ShowList from "ShowList.js"; 

class ShowListParent extends Component { 
    render() { 
    const shows = ['show1', 'show2']; 

    return <ShowList cards={shows} /> 
    } 
} 

export default ShowListParent;