React中有三元运算符的数据时，传入一个<li>

Question

只有当列表项中有数据时，我如何才能选择性地传入列表项？我将所有文本信息存储在 info.json:

{
  "info": [
    {
      "name": "Bob",
      "description": "Bob Vance of Vance Refrigeration"
    },
    {
      "name": "Kevin",
      "description": ""
    },
    {
      "name": "Jim",
      "description": ""
    }
  ]
}

我正在映射这些项目中的每一个，并且仅当其中有内容时才将它们呈现到页面上。如您所见，Kevin 和 Jim 没有任何描述，因此我不会将其呈现在列表中。

info(item) {
  <div className="row">
    <ul>
      <li>{item.name}</li>
      <li>{item.description == "" ? undefined : item.description}</li>
    </ul>
  </div>
} 

//this.props.office is passed down from `App.js` and contains the JSON that is shown above
render() {
  return (
    {(this.props.office).map((x) => this.info(x))}
  )
}

如果item.description为空字符串，如何避免显示列表项？我试图将其设置为未定义，但这不起作用。

Answer 1

使用逻辑 or 因为在反应中，Boolean "element" is ignored (demo):

  <div className="row">
    <ul>
      <li>{item.name}</li>

      /* if the description is empty the result is true (and will be ignored), else  the result is the JSX */
      {item.description === '' || <li>{item.description}</li>} 

    </ul>
  </div>

但是，如果您不确定描述是否为空字符串 ("")，并且可以是任何 "empty value"（未定义，空），您可以改为这样做 (demo):

  <div className="row">
    <ul>
      <li>{item.name}</li>

      /* if the description is "", 0, null, or undefined it will be converted to false (and will be ignored), else  the result is the JSX */
      {!!item.description && <li>{item.description}</li>} 

    </ul>
  </div>

Answer 2

您可以将条件包裹在 li

周围

info(item) {
  <div className="row">
    <ul>
      <li>{item.name}</li>
      {item.description !== "" && <li>item.description</li>}
    </ul>
  </div>
}

Answer 3

如果你根本不想呈现没有描述的项目，你应该filter它从数组中取出：

{(this.props.office)
   .filter((x) => x.description !== "")
   .map((x) => this.info(x))}

此外，我相信您必须 return 从 info 方法中反应元素 (jsx) 才能使其工作：

info(item) {
  return (
    <div className="row">
      <ul>
        <li>{item.name}</li>
        <li>{item.description}</li>
      </ul>
    </div>
  )
}

Answer 4

您可以只检查 description 是否存在，如果存在，则调用 info() 方法，否则 return false。 React 不会渲染 Boolean 和 undefines.

希望对您有所帮助！

const config = {
  "info": [{
    "name": "Bob",
    "description": "Bob Vance of Vance Refrigeration"
  }, {
    "name": "Kevin",
    "description": ""
  }, {
    "name": "Jim",
    "description": ""
  }]
}

class App extends React.Component{
  info(item) {
   return <div className="row">
      <ul>
        <li>{item.name}</li>
        <li>{item.description}</li>
      </ul>
    </div>
  } 
  render(){
    const list = config.info.map((x) => x.description.length > 0 && this.info(x))
    return <div>
      {list}
    </div>
  }
}

ReactDOM.render(<App/>, document.getElementById('app'))

<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 id="app"></div>

React中有三元运算符的数据时，传入一个<li>

Pass in a <li> when there is data with ternary operator in React

javascript

json

underscore.js

reactjs