Je suis très nouveau pour réagir et essayer de commencer une application. Dans mon fichier principal App.js, je confie des données d'accessoires factices pour transmettre au composant enfant App.js: P> calendrier code>. J'essaie d'utiliser les fonctions de flèche VS Classe ou fonctions pour créer les composants. Je suis sûr que je manque quelque chose de très basique. Je gagne beaucoup d'erreurs d'ESLint sur une virgule manquante et "types ne sont pas pris en charge par la version JavaScript actuelle." import React from 'react';
import PropTypes from 'prop-types';
import { render } from 'react-dom';
import Schedule from './components/home/SchedulePage';
const App = () => (
orders: [
{
id: 1,
title: 'First Order',
desc: 'This order is for .'
},
{
id: 2,
title: 'Second Order',
desc: 'This order is for .'
},
{
id: 3,
title: 'Third Order',
desc: 'This order is for .'
},
{
id: 4,
title: 'Fourth Order',
desc: 'This order is for .'
},
{
id: 5,
title: 'Fifth Order',
desc: 'This order is for .'
}
]
return (
<div>
<Schedule/>
</div>
);
);
export default App;
4 Réponses :
Votre balisage:
<Schedule orders={orders} />
Vous pouvez transmettre votre Vous pouvez nommer ce que vous voulez, disons que vous vouliez nommer cet accessoire Vous pouvez alors accéder à vos commandes commandes code> à calendrier code> comme ceci: banane code> vous pouvez faire ceci: p>
code> dans votre code> Calendrier code> composant de ce type: P> const Schedule = (props) => {
console.log(props.banana)
}
Vous avez une syntaxe incorrecte dans le corps du composant. Il devrait être comme
p>
import PropTypes from 'prop-types';
import { render } from 'react-dom';
import Schedule from './components/home/SchedulePage';
const orders = [
{
id: 1,
title: 'First Order',
desc: 'This order is for .'
},
{
id: 2,
title: 'Second Order',
desc: 'This order is for .'
},
{
id: 3,
title: 'Third Order',
desc: 'This order is for .'
},
{
id: 4,
title: 'Fourth Order',
desc: 'This order is for .'
},
{
id: 5,
title: 'Fifth Order',
desc: 'This order is for .'
}
];
const App = () => {
return (
<div>
<Schedule orders={orders} />
</div>
);
};
export default App;
Droite, il devrait être Commandes Const = [
C'est ainsi que vous pouvez transmettre des données de parent à un composant enfant Vous pouvez itérer et transmettre tous les objets à un composant enfant
Commandes fait partie de l'état Vous pouvez le déclarer en dehors de votre composant.Commandes sera acessable à l'intérieurSchedule viaaccessurateursconst app = () => ( doit êtreconst app = () => {, vous utilisez de mauvaises bretellesJ'ai traversé de nombreux tutoriels de vidéo et de texte :) J'ai besoin de me salir mes mains et de commencer à coder pour le rendre vraiment enfui.