gặp lỗi khi xuất biến trong reactjs

Question

xin chào, tôi có thành phần này trong 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;

tôi cần xuất dòng này trong hàm trả về: {props.slices[2].transform === '1' ? '10' : props.slices[2].transform.replace('0.','')}như một biến để sử dụng nó trong một thành phần khác.
vì vậy tôi đã làm điều này:

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

nhưng tôi gặp lỗi này: Mã thông báo không mong muốn, dự kiến ​​"," (47:20)
ai đó có thể giúp tôi xuất biến. cảm ơn bạn trước

Answer 1

Như bạn đã viết

tôi cần xuất dòng này trong hàm trả về: {props.slices[2].transform === '1' ? '10' : props.slices[2].transform.replace('0.','')}như một biến để sử dụng nó trong một thành phần khác

Tôi giả sử, bạn không muốn hiển thị bất cứ thứ gì trong thành phần này mà chỉ muốn trả về một số giá trị đã tính? Đúng? Nếu Có, thì bạn chỉ cần trả về các giá trị như thế này.

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;

Và nếu bạn trả về các giá trị như thế này return (<> ... some JSX ... </>);thì nó sẽ là một số JSX được kết xuất, tôi nghĩ bạn không thể xuất đơn giản dưới dạng biến để được sử dụng bởi thành phần khác.

Cập nhật

Để sử dụng myVar trong một thành phần khác, hãy làm điều này

import Questions from 'questions-file-name';

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

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