reactjs에서 변수를 내보낼 때 오류가 발생합니다.

Question

안녕하세요 반응 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;

{props.slices[2].transform === '1' ? '10' : props.slices[2].transform.replace('0.','')}다른 구성 요소에서 사용할 변수로 반환 함수에있는이 줄을 내 보내야합니다 .
그래서 나는 이것을했다 :

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

하지만이 오류가 발생합니다. 예기치 않은 토큰, 예상 ","(47:20)
누군가가 변수를 내보내는 데 도움이 될 수 있습니다. 미리 감사드립니다

Answer 1

당신이 쓴대로

반환 함수에있는이 줄을 내 보내야합니다. {props.slices[2].transform === '1' ? '10' : props.slices[2].transform.replace('0.','')}다른 구성 요소에서 사용하려면 변수로

이 구성 요소에서 아무것도 렌더링하지 않고 계산 된 값을 반환하고 싶습니까? 권리? 그렇다면 다음과 같은 값을 간단히 반환 할 수 있습니다.

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;

그리고 이와 같은 값을 반환하면 return (<> ... some JSX ... </>);렌더링 된 JSX가 될 것입니다. 다른 구성 요소에서 사용할 변수로 간단히 내보낼 수는 없습니다.

최신 정보

다른 구성 요소에서 myVar를 사용하려면 다음을 수행하십시오.

import Questions from 'questions-file-name';

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

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