J'essaie de créer le chronomètre sur le js réactif. Ci-dessous mon code

<div id="root"></div>
<script src="https://unpkg.com/react@16.3.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
<script src="https://unpkg.com/prop-types@15.6.1/prop-types.js"></script>
<script type="text/babel">
function StopWatch(running, lapse) {
  const buttonStyles = {
    border: "1px solid #ccc",
    background: "#fff",
    fontSize: "2em",
    padding: 15,
    margin: 5,
    width: 200
  };
  return (
    <div>
      <label
        style={{
          fontSize: "5em",
          display: "block"
        }}
      >
        {lapse}ms
      </label>

      <button style={buttonStyles}>{running ? "stop" : "start"}</button>
      <button style={buttonStyles}>Clear</button>
    </div>
  );
}
const rootElement = document.getElementById("root");
const element = <StopWatch running={true} lapse={0} />;
ReactDOM.render(element, rootElement);
</script>

Lors de l'exécution du fichier ci-dessus, je reçois le message d'erreur :

Violation invariante non capturée : les objets ne sont pas valides en tant qu'enfant React (trouvé : objet avec les clés {}). Si vous vouliez rendre une collection d'enfants, utilisez plutôt un tableau.

Mon souci est que je suis en mesure de transmettre la valeur de la propriété running, mais l'erreur se produit lorsque je transmets la valeur de la propriété lapse. Quel est le problème ici et quelle est la différence lors de la transmission de la valeur pour les deux propriétés ?

0
Nandy 17 mars 2019 à 13:41

2 réponses

Meilleure réponse

Vous avez oublié de mettre les accolades en passant les accessoires ; ça devrait être:

function StopWatch({ running, lapse })

0
Isabella 17 mars 2019 à 10:49