为 ReactJS 的 JSX 中的变量赋值

Question

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

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

Uncaught (in promise) Error: Objects is not valid as a React child (found: object with keys

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

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

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

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

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

Answer 2

I think this would be a fairly elegant solution:

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

Answer 3

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

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

Answer 4

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