javascript - helmet - Importar archivo JSON en React
leaflet ajax (6)
// renombrar el archivo .json a .js y mantenerlo en la carpeta src
Declara el objeto json como una variable
var customData = { "key":"value" };
Exportarlo utilizando module.exports
module.exports = customData;
Desde el componente que lo necesita, asegúrese de realizar una copia de seguridad de dos carpetas.
import customData from ''../customData'';
Soy nuevo en React y estoy intentando importar una variable JSON DATA desde un archivo externo. Estoy recibiendo el siguiente error:
No se puede encontrar el módulo "./customData.json"
¿Alguien podría ayudarme? Funciona si tengo mi variable DATA en index.js pero no cuando está en un archivo JSON externo.
import React, {Component} from ''react'';
import ReactDOM from ''react-dom'';
import customData from ''./customData.json'';
import Profile from ''./components/profile'';
import Hobbies from ''./components/hobbies'';
class App extends Component {
render() {
return (
<div>
<Profile name={this.props.profileData.name}imgUrl={this.props.profileData.imgURL} />
<Hobbies hobbyList={this.props.profileData.hobbyList}/>
</div>
);
}
}
ReactDOM.render(<App profileData={DATA}/>, document.querySelector(''.container'')); hobbies.js
import React, {Component} from ''react'';
var Hobbies = React.createClass({
render: function(){
var hobbies = this.props.hobbyList.map(function(hobby, index){
return (<li key={index}>{hobby}</li>);
});
return (
<div>
<h5>My hobbies:</h5>
<ul>
{hobbies}
</ul>
</div>
);
}
});
export default Hobbies; perfil.js
import React from ''react'';
var Profile = React.createClass({
render: function(){
return (
<div>
<h3>{this.props.name}</h3>
<img src={this.props.imgUrl} />
</div>
)
}
});
export default Profile customData.json
var DATA = {
name: ''John Smith'',
imgURL: ''http://lorempixel.com/100/100/'',
hobbyList: [''coding'', ''writing'', ''skiing'']
}
export default DATA
Almacene su archivo JSON con la extensión .js y asegúrese de que su JSON esté en el mismo directorio.
Con json-loader instalado, puedes usar
import customData from ''../customData.json'';
O también, más sencillamente.
import customData from ''../customData'';
Para instalar json-loader
npm install --save-dev json-loader
Esta vieja castaña ...
En resumen, debe usar require y dejar que el nodo maneje el análisis como parte de la llamada a require, no externalizarlo a un módulo de terceros. También debe tener cuidado de que sus configuraciones sean a prueba de balas, lo que significa que debe verificar cuidadosamente los datos devueltos.
Pero por razones de brevedad, considere el siguiente ejemplo:
Por ejemplo, digamos que tengo un archivo de configuración ''admins.json'' en la raíz de mi aplicación que contiene lo siguiente:
[{
// Note the quoted keys, "userName", "passSalted"!
"userName":"tech1337",
"passSalted":"xxxxxxxxxxxx"
}]
Puedo hacer lo siguiente y obtener los datos del archivo con facilidad.
let admins = require(''~/app/admins.json'');
console.log(admins[0].userName);
Ahora los datos están y se pueden usar como un objeto regular (o matriz de).
Una buena manera (sin agregar una extensión .js falsa que es para código no para datos y configuraciones) es usar el módulo json-loader . Si ha utilizado la aplicación create-react-app para armar su proyecto, el módulo ya está incluido, solo necesita importar su json:
import Profile from ''./components/profile'';
This respuesta explica más.
intente con la export default DATA o module.exports = DATA