Question

我有以下文件：

import React from 'react';
import SolveButton from "./SolveButton";
import CheckButton from "./CheckButton";
import StyledComponent from 'styled-components';

function SolveCheckButton() {
    return (
        <div>
            <SolveButton
                selectedAnswers={[1]}
                correctAnswers={[1, 2]}
            />
            <CheckButton
                checkAnswer={() => console.log('clicked')}
                isAufgabeCompleted={true}
            />
        </div>
    );
}

export const SolveCheckButtonElement = StyledComponent.button`
        border: 1px solid #938A7F;
        border-radius: 25px;
        width: 40%;
    `;
export default SolveCheckButton;

和

import React
    from 'react';
import PropTypes
    from 'prop-types';
import styled
    from 'styled-components';
import {SolveCheckButtonElement}
    from "./SolveCheckButton";

CheckButton.propTypes = {
    checkAnswer: PropTypes.func.isRequired,
    isAufgabeCompleted: PropTypes.bool.isRequired,
};

export const CheckButtonElement = styled(SolveCheckButtonElement)`
    background: white;
    color: #938A7F;
`;

function CheckButton(props) {
    const {
        checkAnswer,
        isAufgabeCompleted,
    } = props;

    return (
        <CheckButtonElement disabled={isAufgabeCompleted === true} onClick={checkAnswer} className={"button"}>
            Check
        </CheckButtonElement>
    );
}

export default CheckButton;

我想将SolveCheckButtonElement扩展到CheckButtonElement，但是我得到了

ReferenceError：初始化之前无法访问词法声明“ SolveCheckButtonElement”

从我的看到，这是您在初始化变量之前尝试使用它的时候。但是我正在将变量从父级导出到子级，因此必须将其初始化。发生了什么事？

编辑：我无法将SolveCheckButtonElement放在子组件中，因为我想在其他组件中使用它

文件之间初始化之前无法访问词法声明“ X”

0 个答案: