如何从道具设置条件？答案

【问题标题】：How do I set a condition from props?如何从道具设置条件？
【发布时间】：2018-09-06 00:08:09
【问题描述】：

在我的反应组件中

render() {
let hasTask = this.props.task

return <div>
 {hasTask && <div> I have a task </div>}
</div>
 }

工作得很好，除非道具没有任务。在反应中处理这个问题的最佳方法是什么。

问题：页面不渲染是因为hasTask不能设置，因为没有叫task的props。

对于这个简单的问题，我真的很抱歉。我必须从某个地方开始。

【问题讨论】：

那为什么不行呢？
props没有任务有什么问题？
您所展示的内容在没有任务的情况下工作得很好 (proof)：没有为组件渲染任何内容，这是您所要求的。请使用 minimal reproducible example 来更新您的问题，以展示问题，最好是使用 Stack Snippets（[<>] 工具栏按钮；here's how to do one）可运行。
@EmbetIsit：与上述无关。请参阅我上面的评论（和证明）。如果this.props 上没有task，则this.props.task 会产生undefined，这是错误的，所以hasTask && <div>...</div> 会产生undefined，React 将其视为“不渲染任何东西”。
stackoverflow.com/questions/22538638/…

标签： javascript reactjs if-statement ecmascript-6 conditional

【解决方案1】：

页面不渲染是因为hasTask不能设置，因为没有叫task的props。

我想你想问的是：如果没有this.props.task，我如何渲染一些东西else？因为当没有this.props.task 时，你所拥有的一切都很好：

class Example extends React.Component {
  render() {
    let hasTask = this.props.task

    return <div>
      {hasTask && <div> I have a task </div>}
      </div>;
  }
}

ReactDOM.render(
    <div>
    Example without task:
    <Example />
    Example with task:
    <Example task="foo" />
    </div>,
    document.getElementById("root")
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

如果是这样，答案是人们通常使用条件运算符：

return <div>
  {hasTask ? <div> I have a task </div> : <div> I don't have a task </div> }
  </div>;

例子：

class Example extends React.Component {
  render() {
    let hasTask = this.props.task

    return <div>
      {hasTask ? <div> I have a task </div> : <div> I don't have a task </div> }
      </div>;
  }
}

ReactDOM.render(
    <div>
    Example without task:
    <Example />
    Example with task:
    <Example task="foo" />
    </div>,
    document.getElementById("root")
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

如果您两次都想要div，您可以稍微简化一下：

return <div>{hasTask ? "I have a task" : "I don't have a task"}</div>;

例子：

class Example extends React.Component {
  render() {
    let hasTask = this.props.task

    return <div>{hasTask ? "I have a task" : "I don't have a task"}</div>;
  }
}

ReactDOM.render(
    <div>
    Example without task:
    <Example />
    Example with task:
    <Example task="foo" />
    </div>,
    document.getElementById("root")
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

【讨论】：

应该作为重复而关闭，在此之前因为不清楚。
@MuratK.：我确实投票不清楚。好骗子，在我的名单上。我会继续并暂时保留它（无论如何它都会被关闭和删除）。

【解决方案2】：

render(
 let hasTask = this.props.task
 return (<div>{hasTask? <div>I have a task</div>:<div/>}</div>)
)

【讨论】：

如果没有任务就中断.. let hasTask = this.props.task
@EmbetIsit 它不会中断。它将是未定义的。如果this.props.task 不存在，那么hasTask 将具有未定义的值