在 reactjs 中导出变量时出错

Question

你好，我在 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;

我需要导出返回函数中的这一行：{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);