web-dev-qa-db-ja.com

React.jsを使用してプロパティが存在するかどうかを確認します

React.jsを使用するのは初めてで、オプションのプロパティが渡される再利用可能なコンポーネントを作成しようとしています。コンポーネントでは、そのオプションのプロパティがmeteorを使用してdbからデータを取得し、返されたオブジェクトにプロパティが存在するか（parent_taskがタスクに存在するか）、存在する場合はリンクを追加します。これはかなり簡単に思えますが、エラーが発生し続けます。誰かが私が欠けているかもしれないものについて何か提案がありますか？私が見逃しているjsxの落とし穴はありますか？

<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

問題の小道具は何ですか？どう？

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

私はこれを理解しました。どうやらそれは構文の問題でした-オブジェクトのプロパティを検索するときは文字列を使用する必要があります。以下の行が機能します：

if ('parent_task' in current_task)
7
bgmaster

React.jsを使用してプロパティが存在するかどうかを確認します

使用できるオプションは2つあります。小道具が存在するかどうかを確認する&&演算子とIfステートメント。オプション1は、プロパティが存在するかどうかを確認し、コードの2番目の部分を実行します。 ifなしのifのように動作します。

オプション1

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

オプション2

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

これは関数名でも機能します。

これを使用して、コンポーネントとタグをレンダリングすることもできます。

1
JayJay Barnard

コンポーネントのコールバックプロパティを確認するには、このエレガントなソリューションを試すことをお勧めします。

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

または破壊を適用する：

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