obtenir une erreur lors de l'exportation de la variable dans reactjs

Question

bonjour j'ai ce composant dans react js:

import React from 'react';
import './Questions.css';

const Questions = (props) => {
    

    let questions = Object.keys(props.slices).map((questionKey, i) => (
        <li key={i}>
            <p>{props.slices[questionKey].question}</p>
            <div className="Answer">
                <input
                onChange={props.selectScore(questionKey)} 
                type="range" 
                min="1" 
                max="10" 
                value={props.slices[questionKey].transform === '1' ? '10' : props.slices[questionKey].transform.replace('0.','')} 
                className="rangeInput"
                style={{background: props.slices[questionKey].fill}} />
                <span className="Score" style={{backgroundColor: props.slices[questionKey].fill}}>
                    <div className="leftArrow" style={{borderRight: '5px solid ' + props.slices[questionKey].fill}}></div>
                   <span className="Score" style={{backgroundColor: props.slices[questionKey].fill}}>
                    {/* <div className="leftArrow" style={{borderRight: '5px solid ' + props.slices[questionKey].fill}}></div> */}
                    {props.slices[questionKey].transform === '1' ? '10' : props.slices[questionKey].transform.replace('0.','')}
                  </span>
                </span>

 
            </div>

        </li>
        
    ));
    
    return (
        <>
           
            My variable = {props.slices[2].transform === '1' ? '10' : props.slices[2].transform.replace('0.','')}

            {questions}
        </>
    );

    
    
}


export default Questions;

J'ai besoin d'exporter cette ligne qui est dans la fonction de retour: {props.slices[2].transform === '1' ? '10' : props.slices[2].transform.replace('0.','')}comme variable pour l'utiliser dans un autre composant.
alors j'ai fait ceci:

export const V = (value) => (
  value === {props.slices[2].transform === '1' ? '10' : props.slices[2].transform.replace('0.','')}
)

mais j'obtiens cette erreur: jeton inattendu, attendu "," (47:20)
quelqu'un pourrait-il m'aider à exporter la variable. Merci d'avance

Answer 1

Comme vous l'avez écrit

j'ai besoin d'exporter cette ligne qui est dans la fonction de retour: {props.slices[2].transform === '1' ? '10' : props.slices[2].transform.replace('0.','')}comme variable pour l'utiliser dans un autre composant

Je suppose que vous ne voulez rien rendre dans ce composant plutôt que de simplement renvoyer des valeurs calculées? Droite? Si Oui, vous devez simplement renvoyer les valeurs comme celle-ci.

import React from 'react';
import './Questions.css';

const Questions = (props) => {
    
    // better to use const instead of let, if you don't need to modify a variable...
    const questions = Object.keys(props.slices).map((questionKey, i) => (
        <li key={i}>
            <p>{props.slices[questionKey].question}</p>
            <div className="Answer">
                <input
                onChange={props.selectScore(questionKey)} 
                type="range" 
                min="1" 
                max="10" 
                value={props.slices[questionKey].transform === '1' ? '10' : props.slices[questionKey].transform.replace('0.','')} 
                className="rangeInput"
                style={{background: props.slices[questionKey].fill}} />
                <span className="Score" style={{backgroundColor: props.slices[questionKey].fill}}>
                    <div className="leftArrow" style={{borderRight: '5px solid ' + props.slices[questionKey].fill}}></div>
                   <span className="Score" style={{backgroundColor: props.slices[questionKey].fill}}>
                    {/* <div className="leftArrow" style={{borderRight: '5px solid ' + props.slices[questionKey].fill}}></div> */}
                    {props.slices[questionKey].transform === '1' ? '10' : props.slices[questionKey].transform.replace('0.','')}
                  </span>
                </span>

 
            </div>

        </li>
        
    ));
    
    const myVar = props.slices[2].transform === '1' ? '10' : props.slices[2].transform.replace('0.','');

    return {myVar,questions};    
    
}


export default Questions;

Et si vous retournez les valeurs comme celle- return (<> ... some JSX ... </>);ci, ce sera du JSX rendu, que je pense que vous ne pouvez pas simplement exporter en tant que variable à utiliser par un autre composant.

Mettre à jour

Pour utiliser myVar dans un autre composant, procédez comme suit

import Questions from 'questions-file-name';

const selectScore= (key)=>{
// do something with score using key
}

const {myVar,questions} = Questions(slices,selectScore);