如何在 React 中使用 `||` 进行内联测试？

Question

// dummy sources
const departments = [{ code: 'DA', title: 'Department A'},
  { code: 'DB', title: 'Department B'},
  { code: 'DC', title: 'Department C'},
  { code: 'DD', title: 'Department D'},
]

const reviewers = ['Department A', 'Department C', 'Department D']
const approvers = ['Department C']

const SFC = props => ( 
  <div>
  {
    departments.map(({ code, title }, i) => (
      <p className = "row" >
        {reviewers.indexOf(title) !== -1 && ( <span>reviewer_{code}</span> )}
        {approvers.indexOf(title) !== -1 && ( <span>approver_{code}</span> )}
      </p>))
  }
  </div>
)

// Render it
ReactDOM.render( <
  SFC / > ,
  document.getElementById("react")
)

.row {
  border: 1px solid black;
  padding: 1em ;
  margin: 1em ;
}

.row span {
  background: lightblue ;
  padding: 1em ;
  margin: 1em ;
}

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
https://whosebug.com/questions/ask#

我想要的是不要在没有审阅者或批准者的地方创建空行。我试过这个：

const SFC = props => ( 
  <div>
  {
    departments.map(({ code, title }, i) => (
      { reviewers.indexOf(title) !== -1 & || approvers.indexOf(title) !== -1 &&
        (
          <p className = "row" >
            {reviewers.indexOf(title) !== -1 && ( <span>reviewer_{code}</span> )}
            {approvers.indexOf(title) !== -1 && ( <span>approver_{code}</span> )}
          </p>
        )
      }
    ))
  }
  </div>
)

我在 reviewers.indexOf(title) !== -1 & || approvers.indexOf(title) !== -1 && <component /> 测试中遇到错误。我也试过 (reviewers.indexOf(title) !== -1 || approvers.indexOf(title) !== -1) && <component />，但无济于事。有什么想法吗？

Answer 1

可能是打字错误，如果这是实际的行：

{ reviewers.indexOf(title) !== -1 & || approvers.indexOf(title) !== -1 &&...

更改为：

{ (reviewers.indexOf(title) !== -1 || approvers.indexOf(title) !== -1) &&...

只需删除第一个 !== -1 之后多余的 & 并查看它是否运行。

如何在 React 中使用 `||` 进行内联测试？

How do use `||` for in-lining tests in React?

javascript

conditional-operator

reactjs