Fehler beim Exportieren von Variablen in Reactjs

Question

Hallo, ich habe diese Komponente in reagieren 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;

Ich muss diese Zeile exportieren, die in der Rückgabefunktion ist: {props.slices[2].transform === '1' ? '10' : props.slices[2].transform.replace('0.','')}als Variable, um es in einer anderen Komponente zu verwenden.
Also habe ich das gemacht:

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

aber ich erhalte diesen Fehler: Unerwartetes Token, erwartetes "," (47:20)
könnte mir jemand helfen, die Variable zu exportieren. danke im Voraus

Answer 1

Wie du geschrieben hast

Ich muss diese Zeile exportieren, die in der Rückgabefunktion ist: {props.slices[2].transform === '1' ? '10' : props.slices[2].transform.replace('0.','')}als Variable, um es in einer anderen Komponente zu verwenden

Ich nehme an, Sie möchten in dieser Komponente nichts rendern, sondern nur einige berechnete Werte zurückgeben. Recht? Wenn ja, sollten Sie die Werte einfach wie folgt zurückgeben.

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;

Und wenn Sie die Werte wie return (<> ... some JSX ... </>);folgt zurückgeben, handelt es sich um gerendertes JSX, das Sie meiner Meinung nach nicht einfach als Variable exportieren können, um es von einer anderen Komponente zu verwenden.

Aktualisieren

Um myVar in einer anderen Komponente zu verwenden, gehen Sie folgendermaßen vor

import Questions from 'questions-file-name';

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

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