需要帮助在 JSX 中设置条件

Posted 2023-02-23

【中文标题】需要帮助在 JSX 中设置条件

【英文标题】：Need help setting up a conditional in JSX

【发布时间】：2019-10-04 03:48:47

【问题描述】：

我正在迭代一个 JSX 代码块，该代码块从 json 文件中获取数据，并显示到 DOM。我需要在我的 map 函数的第一次迭代中应用一种样式，但其余部分需要为空白。

训练变量保存我的 json 文件中的数据。我需要在这个 map 方法的第一次迭代中应用“marginRight:'5%'”的样式。

trainer.js

 training.map((course, index) =>      
  return (
    <Course name=course.name
        school=course.school
        location=course.location
        year=course.year
        class=classes
        key=index

        style=marginRight: '5%'  <- this works but applies the style to all courses, which is not what I want.

    />
  )
)

trainerTemplate.js - 这是被渲染的模板。道具从 trainer.js 传递到这里

function Course(props)
  return (
    <Fragment>
      <Grid item style=props.style>

我假设我需要在某处设置一个三元运算符来检查索引是否为 0，但我似乎无法正常工作

【问题讨论】：

你试过index === 0 ? marginRight: '5%' : '' - 你有索引，所以你知道什么时候你在0。使用它。 （伪代码。您可能需要重新安排一下才能完成这项工作，但这是您在 JSX 中比较的方式）

【参考方案1】：

和@Kai Qing ansewr 一样

 training.map((course, index) =>      
  return (
    <Course name=course.name
        school=course.school
        location=course.location
        year=course.year
        class=classes
        key=index
style=marginRight: index === 0 ? '5%' : ''
    
    />
  )
)

【讨论】：

差不多。您在marginRight 的值中有您的三元组，我敢打赌这是正确的方法。我不经常在 JSX 工作，所以我忘记了，但我很熟悉，知道它是这样的。

默认值为0而不是空字符串会更好吗？ marginRight: index === 0 ? marginRight: '5%' : '0'

marginRight: (index === 0 ? marginRight: '5%' : '0') 怎么样

@Sung M. Kim 是的，但如果一个人正在使用另一个边距，那么它将覆盖它。

@learnerforlife 确保有两个右大括号：` style=marginRight: index === 0 ? '5%' : '' `

【参考方案2】：

试试这个，我觉得比内联做起来要清楚一点：

 training.map((course, index) => 
  const style = index === 0 ?  marginRight: '5%'  : null; // then use this as the style later
  return (
    <Course 
        name=course.name
        school=course.school
        location=course.location
        year=course.year
        className=classes // also change this to className, not class
        key=index // if you can, avoid using the index as the key
        style=style  
    />
  )
)

【参考方案3】：

如果你有条件地想单独为第一项设置边距，你可以试试这个：这个传递第一个元素的样式属性，如果索引不属于第一个元素，则避免覆盖先前设置的边距。

training.map((course, index) => 
  return (
    <Course
      name=course.name
      school=course.school
      location=course.location
      year=course.year
      class=classes
      key=index
      style=index === 0 ?  marginRight: "5%"  : 
   />
  );
)