affecter une valeur à une variable dans JSX pour ReactJS

Question

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

Le code ci-dessus génère une erreur « Uncaught (in promise) Error: Objects are not valid as a React child (found: object with keys » parce story en ligne numéro 3 est un objet.

Je peux déplacer cette condition directement en tant que: <SliderItem story={story.story} />, mais je veux savoir s'il est possible d'attribuer ma valeur calculée à une variable et de l'utiliser en JSX?

Je veux appliquer une logique comme:

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

Answer 1

Tout entre {} dans le JSX est juste JavaScript, vous pouvez effectuer les opérations suivantes:

{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

Bien que je ne le recommanderais pas comme il obscurcit vraiment votre code, vous pouvez utiliser l'opérateur de virgule pour vous permettre d'attribuer une valeur:

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

Je ne sais pas pourquoi vous voudriez faire ceci cependant?

Answer 3

Vous pouvez créer une fonction en dehors de la render() qui obtenir la valeur correcte:

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

Et puis utilisez dans JSX:

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

Answer 4

Pourquoi ne pas passer juste à story.story ??

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

Dans votre composant si this.props.story est undefined puis utilisez this.props.fallback.