Question

我是使用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>
    )
  }
});

Answer 1

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

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

Answer 2

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

if ('parent_task' in current_task)

Answer 3

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

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

选项1

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

选项2

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

这也适用于函数名称。

您还可以使用此选项检查渲染组件和标签。

Answer 4

我建议尝试使用这种优雅的解决方案来检查组件的回调属性：

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

或进行销毁：

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

Answer 5

这对我有用

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

Answer 6

您需要使用所需的链接退出getParentTaskLink（）。

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

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

6 个答案: