jsファイルからreactでデータをインポートしてコンポーネントで使用する方法

Question

このデータは独自の.jsファイルになっています。アプリケーション全体に使用できるようにしたいのですがどうすればいいですか？

私は私Posts.jsコンポーネントにポスト（データ）を使用しようとすると、私はエラーの記事を取得する小道具として

import posts from './data/posts'; //the js file with the data 
import Posts from './components/Posts/Posts'; // the component I want to use it in 
class App extends Component { 
    render() { 
    return (
     <div className="App"> 
      <Navigation /> 
      <Posts posts={posts}/> 
     </div> 
    ); 
    } 
} 

を私App.jsにインポートし、それを伝承しようとした

const posts = [{ 
      username: "lenard", 
      avi: "https://scontent-sjc2-1.cdninstagram.com/t51.2885-15/e35/20905417_730036297205402_7461293070093385728_n.jpg", 
     }] 

私はそれ

{posts.map((item) => 

を通じてマップしようが、私は小道具として受け継がれている場合、その定義されていない理由を私は理解していない時に定義されていません。

Answer 1

あなたはそれが他のファイルにimportするために、あなたのjsファイルでpostsをエクスポートする必要があります。

export const posts = [{ 
     username: "lenard", 
     avi: "https://scontent-sjc2-1.cdninstagram.com/t51.2885-15/e35/20905417_730036297205402_7461293070093385728_n.jpg", 
}] 

次にあなたがここ

import {posts} from './data/posts'; 

を使用することができ、作業の例です：
https://www.webpackbin.com/bins/-KtsA8KTKvwxTUo2qlW8

export defaultにする場合は、c constsをreateし、それをエクスポートします。

const posts = [{ 
     username: "lenard", 
     avi: "https://scontent-sjc2-1.cdninstagram.com/t51.2885-15/e35/20905417_730036297205402_7461293070093385728_n.jpg" 
}]; 

export default posts; 

を、定期的にそれをインポートします。

import posts from './data/posts'; 

https://www.webpackbin.com/bins/-Kts8LJQBS4I1pprHiSo