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

Question

How can I optionally pass in a list item only if there's data in it? I'm storing all of my text information in info.json :

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

I'm mapping each of these items and rendering them onto the page only if there's content inside. As you can see, Kevin and Jim doesn't have any description, so I wouldn't render it onto the list.

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))}
  )
}

How can I avoid displaying the list item if item.description is an empty string? I tried to set it to undefined but that doesn't work.

Answer 1

If you don't want to render items without description at all, you should filter it out from the array:

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

Furthermore I belive you have to return react element (jsx) from info method to make it work:

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

Answer 2

You can just check for the existence of description , if it is available, call the info() method else return false . React won't render Boolean and undefine s.

Hope this helps!

 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> 

Answer 3

Use a logical or because in react, a 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>

However, if you're not sure if the description will be an empty string (""), and can be any "empty value" (undefined, null) you can do this instead ( 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 4

you can just wrap the condition around the li

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