为 ReactJS 的 JSX 中的变量赋值

Posted 2023-02-21

【中文标题】为 ReactJS 的 JSX 中的变量赋值

【英文标题】：Assign a value to a variable in JSX for ReactJS

【发布时间】：2018-03-16 21:42:20

【问题描述】：

props.stories.map((story) =>
    <div key=story.id>
        story = story.story
        <SliderItem story=story />
    </div>
)

上面的代码抛出一个错误说：

未捕获（承诺中）错误：对象作为 React 子项无效（找到：带键的对象

因为第 3 行中的 story 是一个对象。

我可以将该条件直接移动为<SliderItem story=story.story />，但我想知道是否有任何方法可以将我的计算值分配给一个变量并在 JSX 中使用它？

我想应用一些逻辑，例如：

 let storyObj = story.type === 'story' && story.story ? story.story : story 

【参考方案1】：

JSX 中 之间的所有内容都只是 javascript，因此您可以执行以下操作：

props.stories.map((story) => 
  const storyObj = (story.type === 'story' && story.story) ? story.story : story;
  return (
    <div key=story.id>
      <SliderItem story=storyObj />
    </div>
  );
)

【讨论】：

我认为这里的普遍愿望是在 jsx 中有一个正常的变量声明，当你没有像 .map 调用这样的东西来创造这样的机会时

@DevinGRhode - 一方面，我同意。另一方面，我只看到两种可能性：a）您希望基于现有的 JS 变量创建一个表达式，在这种情况下，is 是一个定义该变量的 JS 上下文。 OP 遇到问题的唯一原因是他们使用“短”形式的 maps 返回值，缺少明确的 ...。解决方法是转换为“长”形式。 b）您正在定义一个文字值，在这种情况下，任何封闭的 JS 上下文都可以正常工作。底线：“将声明添加到最紧密的封闭 JS 上下文”始终是一个可用的解决方案。

【参考方案2】：

虽然我不推荐它，因为它确实混淆了您的代码，但您可以使用逗号运算符来分配一个值：

story = story.story, <SliderItem story=story />

但我不确定您为什么要这样做？

【讨论】：

请注意，这不允许您创建/声明新变量。因此，以下内容将不起作用：let foo = 123, <Bar foo=foo />

【参考方案3】：

您可以在render() 之外创建一个函数，该函数将获得正确的值：

function getStory(storyObj) 
  return storyObj.type === 'story' && storyObj.story ? storyObj.story : storyObj;

然后在 JSX 中使用它：

props.stories.map(storyObj =>
  <div key=storyObj.id>
     <SliderItem story=getStory(storyObj) />
  </div>
)

【讨论】：

这里最干净的建议。

【参考方案4】：

你为什么不直接传入story.story??

  props.stories.map((story) =>
    <div key=story.id>
      <SliderItem story=story.story fallback=story />
    </div>
  )

如果this.props.story 是undefined，则在您的组件中使用this.props.fallback。

【讨论】：

No.. 我的组件应该接受这两种结构。我不希望我的最终用户同时传递这两个道具。我可能不是使用这个组件的人。假设SliderItem 只接受story

【参考方案5】：

我认为这将是一个相当优雅的解决方案：

function someReactFunctionalComponent(props) 
  const vars = 

  return (
    <div>
      <h1>... lots of code ...</h1>
      vars.someFoo_s = bar ? dance : undefined
      <ul>
        
          vars.someFoo=normalizeFoo(vars.someFoo_s),
          vars.someFoo_s.map((aFoo) => (
            <li>aFoo</li>
          ))
        
      </ul>
    </div>
  )

【讨论】：

这是应该获得最多票数的解决方案。优雅！

【参考方案6】：

您可以使用 IIFE（立即调用函数表达式）

props.stories.map((story) =>
    <div key=story.id>
        (() =>  
          story = story.story
          return <SliderItem story=story />
        )()
    </div>
)