Javascript 使用React.js检查属性是否存在

我对使用react.js还不熟悉，我正在尝试编写一个可重用组件，该组件具有传递给它的可选属性。在组件中，该可选属性使用meteor从数据库中提取数据，然后我想检查返回的对象上是否存在属性（父任务上存在父任务），如果存在，则添加一个链接。这看起来相当简单，但我总是出错。有人对我可能遗漏的内容有什么建议吗？是否有一个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>
    )
  }
});

//使用属性呈现组件
//任务列表标题
Header=React.createClass({
mixins:[数据]，
getMeteorData（）{
var handle=Meteor.subscribe（'tasks'）；
返回{
taskLoading:！handle.ready（），
task:Tasks.findOne（{u id:this.props.task}）
}
},
getParentTaskLink（）{
如果（！this.data.taskLoading）{
var current_task=this.data.task；
if（当前任务中的父任务）{//或当前任务。hasOwnProperty（父任务）
log（“父任务存在！”）；
}
}
},
render（）{
返回(
{this.getParentTaskLink（）}//最终在此处返回锚元素
你好，世界
)
}
});

有问题的道具是什么？怎么样

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

{this.props.propquestion？：null}

您需要从getParentTaskLink（）返回所需的链接

 if (current_task.parent_task) {
      return (<a href="#">link</a>);
    } else { return null; }

if（当前任务。父任务）{
返回（）；
}else{return null；}

我想出来了。显然这是一个语法问题——在搜索对象中的属性时需要使用字符串。下面这一行是有用的：

if ('parent_task' in current_task)

---

使用React.js检查属性是否存在

您可以使用两个选项。&&运算符和If语句检查道具是否存在。 选项1将检查属性是否存在，然后运行代码的第二部分。它的工作原理类似于没有if的if

选择1

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

选择2

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

这也适用于函数名

---

您还可以使用此检查来呈现组件和标记。

我建议尝试此优雅的解决方案来检查组件上的回调属性：

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

或应用分解：

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

这对我有用

if(this.props.test === undefined){
    console.log('props.test is not defined')
}

---

你哪里有问题？在getParentTaskLink中？是的，我编辑了它，希望能帮助澄清。不是真的，为什么

data.task

在

data.taskLoading

false检查中是空的？如果是这样的话，为什么不在（！this.data.taskLoading&&this.data.task）{中使用它呢？我想看看返回的数据对象（task）上是否存在属性parent\u task。我编辑了这个问题以使它更清楚。我尝试了你的建议，但它总是给我一个错误。@meta-meta编写

{this.props.proquiquestion&&}

不是更容易吗？或者。一些开发人员被&&guard搞糊涂了。我可以选择任何一种方式。使用此

{this.props.proquiquestion&}

确保

this.props.proquiquestion

是bool或强制它为bool。如果

this.props.proquiquestion

为0，则将呈现0。如果this.props.proquiquestion是一个present参数，并且是布尔值，则当它带有“false”时，将导致错误值。我使用了this.props.propquiquestion！=null并得到了期望的结果。@meta meta我不确定您是否想说同样的话，我只是将console.log留在那里进行调试。错误是没有定义父任务。您是否尝试过检查（当前任务[父任务]），这应该为您提供当前任务中父任务属性的值。这似乎给了我相同的错误。我知道在某些情况下它不会被定义，这就是我想检查的原因。我以前在其他应用程序中从未遇到过JavaScript的此问题，这让我认为这是JSX的问题。这是说父任务没有定义（因为不是），但这就是我想检查的原因。哎呀，对不起，你是对的。我应该键入if（当前任务。父任务）。使用[parent任务]确实使它认为parent_task是一个变量而不是一个属性。我编辑了我的原始答案以反映这一点。请详细说明您的答案，以帮助其他人解决此问题。如果您期望的值是布尔值，那么如果它带有“false”值，它将无法按预期工作。