为 ReactJS 的 JSX 中的变量赋值

Question

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

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

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

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

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

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

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

原文由 Asim K T 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 Tholle 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以在 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>
)}

原文由 dominik791 发布，翻译遵循 CC BY-SA 3.0 许可协议