一個值分配給在JSX一個變量ReactJS

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

上面的代碼引發錯誤說「Uncaught (in promise) Error: Objects are not valid as a React child (found: object with keys」，因爲在story行號3是一個對象。一個值分配給在JSX一個變量ReactJS

我可以直接移動該條件爲：<SliderItem story={story.story} />，但我想知道有什麼辦法可以將我的計算值分配給一個變量並在JSX中使用它嗎？

我想申請一些邏輯，如：

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

來源

2017-10-05 Asim K T

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

來源

2017-10-05 09:59:10 Tholle

雖然我不會推薦它因爲它確實會混淆代碼，所以可以使用逗號運算符來分配值：

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

我不知道爲什麼你想這樣做？

來源

2017-10-05 10:05:34 Develer

可以創建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> 
)}

來源

2017-10-05 10:47:20 dominik791

最乾淨的建議在這裏。 –

你爲什麼不只是傳遞story.story？

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

在你的組件如果this.props.story是undefined然後使用this.props.fallback。

來源

2017-10-05 17:58:08

否..我的組件應該接受這兩種結構。我不希望我的最終用戶通過這兩個道具。我可能不是使用這個組件的人。假設'SliderItem'只接受'story' –

一個值分配給在JSX一個變量ReactJS

回答

相關問題