プロジェクトへの反応要素のインポート

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

だから私は今、何をする必要があるか私のプロジェクトの中で、これをインポートしていると私は倒れてる場所です。

私はテーブル内を引っ張る「ページ」反応要素を作成しました反応要素 - ちょうどうまくいきました「Hello World」と言った静的なReact要素をいくつかテストしました。上記の最後の行をReact要素に変更します。

私の頭の中で動作するはずです...

export default (ShowList cards={shows}); 

が、私は私が私を推測しているので、私はその最終ラインの構文エラーを取得していますブラウザでテストし、私は間違っているつもりだところ、これは気持ちを持っています間違ったことをやったことがありますが、もう一度私にはうまく見えます。誰かが私が間違ったことを指摘できれば、とても感謝しています！

また、私の質問のタイトルは、今後この問題にぶつかる可能性のある人にとってはあまり役に立ちません。歓迎されたより良い提案です！ :-)

N

Answer 1

あなたはexport default ShowListだろうように、コンポーネントは、ShowListあります。

次に、import ShowList from "ShowList.js"を使用してインポートします。

そして、ShowListがインポートされるコンポーネントでshowsが定義されている場合、<ShowList cards={shows}/>を使用して実装します。

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;