web-dev-qa-db-fra.com

Vérifiez si la propriété existe à l'aide de React.js

Je suis nouveau dans l'utilisation de react.js et j'essaie d'écrire un composant réutilisable auquel une propriété facultative lui a été transmise. Dans le composant, cette propriété facultative extrait les données d'une base de données à l'aide d'un météore, je souhaite vérifier si une propriété existe sur l'objet renvoyé (la tâche parent_task existe sur la tâche) et, si elle existe, ajoute un lien. Cela semble assez simple, mais je continue à recevoir des erreurs. Quelqu'un a-t-il des suggestions sur ce que je pourrais manquer? Existe-t-il un gotcha jsx qui me manque?

<Header task={params.task_id} />  // rendering component with property

// Task List Header
Header = React.createClass({
  mixins: [ReactMeteorData],

  getMeteorData() {
    var handle = Meteor.subscribe('tasks');

    return {
      taskLoading: ! handle.ready(),
      task: Tasks.findOne({_id: this.props.task})
    }
  },

  getParentTaskLink() {
    if (!this.data.taskLoading) {
      var current_task = this.data.task;

      if (parent_task in current_task) {  // or current_task.hasOwnProperty(parent_task)
        console.log("parent_task exists!");
      }
    }
  },

  render() {
    return (
      <div className="bar bar-header bar-calm">
        {this.getParentTaskLink()} // eventually return anchor element here
        <h1 className="title">Hello World</h1>
      </div>
    )
  }
});
javascriptreactjsmeteor-react
19
bgmaster

quel est l'accessoire en question? que diriez-vous

{this.props.propInQuestion ? <a href="#">link</a> : null}
29
meta-meta

J'ai compris cela. Apparemment, c'était un problème de syntaxe - vous devez utiliser une chaîne lors de la recherche de propriétés dans les objets. La ligne ci-dessous fonctionne:

if ('parent_task' in current_task)
7
bgmaster

Vérifiez si une propriété existe à l'aide de React.js

Vous pouvez utiliser deux options. l'opérateur && et l'instruction If pour vérifier si les accessoires existent. L'option 1 vérifie si la propriété existe, puis exécute la deuxième partie du code. Cela fonctionne comme un si sans le si.

Option 1

this.props.property && this.props.property

Option 2

if(this.props.property){
this.props.property
}

Cela fonctionne également avec les noms de fonction.

Vous pouvez également utiliser cette vérification pour rendre les composants et les balises.

1
JayJay Barnard

Je suggère d'essayer cette solution élégante pour vérifier la propriété de rappel sur votre composant:

if(typeof this.props.onClickCallback === 'function') { 
// Do stuff; 
}

ou en appliquant la déstructuration:

const { onClickCallback } = this.props;
if(typeof onClickCallback === 'function') { 
// Do stuff; 
}
0
Andrea - codemillers.com