web-dev-qa-db-fra.com

Comment importer un objet à partir d'un fichier JS externe dans React JS utilisant un pack Web

Je m'appuie sur ma connaissance de React JS et je voudrais importer/inclure des fichiers JS externes qui ne contiennent rien de plus qu'un objet/tableau d'objets. Je l'ai fait dans jQuery, Vanilla JS et même en Angular JS. Sweet !!!

Comment puis-je réaliser la même chose dans React JS.

J'ai comme index.html ce qui suit:

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Hello React</title>
    </head>
    <body>
        <div id="hello"></div>
        <div id="world"></div>

        <div id="caseListing"></div>

        <script src="js/bundle.js"></script>
    </body>
</html>

et mon main.js (fichier d'entrée) comme suit:

import Hello from './jsx/hello.jsx';
import World from './jsx/world.jsx';

var $ = require('./lib/jquery.js');
window.jQuery = $;
window.$ = $;

var Jobs = require('./data/jobs.js');
console.log('Jobs:', Jobs);

Ici, j'ai Jobs.js comme:

var Jobs = (function () {
    "use strict";
    return {
        "jobs": [
            {
                "jobType": "Web developer",
                "desc": "Creates website"
            },
            {
                "jobType": "Bin Man",
                "desc": "Collects bins"
            }
        ]
    };
}());

Et juste pour faire bonne mesure, mon webpack.config.js ressemble à ceci:

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: [
        './js/main.js'
    ],
    output: {
        path: __dirname,
        filename: 'js/bundle.js'
    },
    module: {
        loaders: [
            {
                test: /.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: [
                        'es2015',
                        'react'
                    ]
                }
            }
        ]
    }
};

Toute aide sera appréciée. :)

javascriptreactjsecmascript-6webpackbabeljs
9
Mr. Benedict

Vous devez exporter des Jobs depuis jobs.js afin de l'importer dans un autre module. Et jobs.js n'a pas besoin d'être une fonction si vous exportez simplement des données statiques. Ainsi, vous pouvez faire ressembler jobs.js à ceci:

export default {
    jobs: [
        {
            jobType: "Web developer",
            desc: "Creates website"
        },
        {
            jobType: "Bin Man",
            desc: "Collects bins"
        }
    ]
};

Ensuite, vous pouvez l'importer comme suit:

import Jobs from './data/jobs.js';

Ou:

var Jobs = require('./data/jobs.js').default;

Si vous souhaitez exiger avec la syntaxe commonjs normale, vous pouvez créer des jobs.js comme ceci:

module.exports = {
    jobs: [
        {
            jobType: "Web developer",
            desc: "Creates website"
        },
        {
            jobType: "Bin Man",
            desc: "Collects bins"
        }
    ]
};

Ce qui vous permet d'exiger ainsi:

var Jobs = require('./data/jobs.js');
19
Ben Sidelinger

Supposons que le fichier dans lequel vous conservez vos données s'appelle "file.js."

var text = "Hello world!"; //In file.js

En dessous de cette ligne, vous devez exporter cette variable afin qu'elle puisse être importée dans le code React:

module.exports = {data: text} //In file.js

La chaîne est stockée sous la forme d'un objet appelé "données". Vous importez ensuite le contenu de "file.js" dans le fichier que vous souhaitez utiliser, disons App.jsx ".

import file from './file.js'; //In App.jsx

Le contenu de l'objet que vous avez exporté dans l'autre fichier est stocké ici en tant que variable "fichier". Vous pouvez ensuite convertir le contenu de "fichier" en un objet:

var str = file.data; //"data" is the object within "file"

Votre chaîne, "Hello world!", Est maintenant stockée dans la variable str.

J'espère que cela t'aides!

12
Adam Touhou