代码之家 › 专栏 › 技术社区 › Yen Sheng

如何在三元表达式中使用null?

react-bootstrap react-jsx reactjs javascript

Yen Sheng · 技术社区 · 9 年前

我使用react和react引导来呈现页面,使用 <ListGroup> 和 <ListGroupItem> bsStyle='info' 当状态不是 '1' '1' .

<ListGroup>
  {tables.map(table => (
    <ListGroupItem
      key={`table.${table.id}`}
      header=(table.name)
      bsStyle={table.status !== '1' ? ('info') : ('')}
      >
      {table.content} - 
    </ListGroupItem>
  ))}
</ListGroup>

它已正确渲染,但由于bsStyle的验证,不断收到以下警告:

Warning: Failed prop type: Invalid prop `bsStyle` of value `` supplied to `ListGroupItem`, expected one of ["success","warning","danger","info"].

有一种解决方法可以通过设置 bsStyle={null} .然而,我无法在三元表达式中工作。以下代码将使其成为字符串 bsStyle='{null}'

<ListGroup>
  {tables.map(table => (
    <ListGroupItem
      key={`table.${table.id}`}
      header=(table.name)
      bsStyle={table.status !== '1' ? ('info') : ('{null}')}
      >
      {table.content} - 
    </ListGroupItem>
  ))}
</ListGroup>

通过的正确方式是什么 {null} 不让它成为一根绳子?

2 回复 | 直到 9 年前

Andrew Li 9 年前

('{null}')

从字面上看 "{null}" .试试这个:

bsStyle={table.status !== '1' ? 'info' : null}

null 很明显,不要用引号括起来。这是 a JSFiddle example

Davorin RuÅ¡evljan 9 年前

如果状态与1没有不同,您可能希望对整个bsStyle属性进行操作

<ListGroupItem
   key={`table.${table.id}`}
   header=(table.name)
   {...( table.status !== '1' ? {bsStyle:'info'} : {} )}
  >

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

1 年前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

1 年前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

1 年前

noblerare · Vite错误-未定义导出(SSR)

1 年前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

1 年前