javascript - react 错误 : is declared but its value is never read. [6133]

Question

我已经创建了一个模式(受益人类型)，当我选择个人作为受益人类型并单击受益人类型模式中的下一个时，我试图调用另一个模式，但是当我尝试实现它时，我在下面失败了两点:
1. 当我导入第二个模态(personModal)时，它向我显示消息“personModal 已声明，但它的值从未被读取。[6133]”虽然我也在使用该导入，因此它没有被导航。
2.在点击受益人类型模式中的下一步按钮后导航到personModal，我想隐藏第一个模式并只显示第二个模式，而不使用 react 导航器和 react 路线。有没有办法做到这一点？

请帮忙。

供您引用，请找到以下代码:

受益人模式

import React, { Component } from 'react';
import Select from 'gssp-common-ui/lib/components/select/select.component';
import Button from 'gssp-common-ui/lib/components/button/button.component';
import personModal from './personModal.component';


const backdropStyle = {
    position: 'fixed',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: 'rgba(0,0,0,0.3)',
    padding: 50
};
const modalStyle = {
    backgroundColor: '#fff',
    borderRadius: 5,
    maxWidth: 500,
    minHeight: 300,
    margin: '0 auto',
    padding: 30,
    position: 'relative'
};

class Modal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dropDownValue: '',
            showBeneficiaryModel: false
        };
    }
    handleDropDownChange = (event, value) => {
        this.setState({ dropDownValue: value });
    }
    clickHandlernextBtn = (e) => {
        if ((e === 'click') && (this.state.dropDownValue === 'Person')) {
            return (
                <div>
                    {console.log('Dropdown value is ', this.state.dropDownValue)}
                    <personModal />
                </div>);
        }
    };

    render() {
        if (!this.props.show) {
            return null;
        }

        return (
            <div style={backdropStyle}>
                <div style={modalStyle}>
                    <h5><b>{'Add Beneficiary'}</b></h5>
                    <p>{'All fields are required unless otherwise noted.'}</p>
                    {/* <form onSubmit={this.handleSubmit}>

                        <select value={this.state.value} onChange={this.handleChange} >
                            <b><option value="beneficiary type">{'Beneficiary Type'}</option></b>
                            <option value="person">{'Person'}</option>
                            <option value="living trust">{'Living Trust'}</option>
                            <option value="testamentary trust created in the insured’s will">{'Testamentary Trust created in the Insured’s Will'}</option>
                            <option value="charity/organization">{'Charity/Organization'}</option>
                            <option value="estate ">{'Estate '}</option>
                        </select>

                        <input type="submit" value="Submit" />
                    </form> */}
                    <Select
                        className="dropdown-class"
                        title={'Beneficiary Type'}
                        options={[
                            {
                                key: 'Person',
                                value: 'Person'
                            },
                            {
                                key: 'Living Trust',
                                value: 'Living Trust'
                            },
                            {
                                key: 'Remove ClasTestamentary Trust created in the Insured’s Will',
        `enter code here`                        value: 'Testamentary Trust created in the Insured’s Will'
                     enter code here       },
                            {
                                key: 'Charity/Organization',
                                value: 'Charity/Organization'
                            },
                            {
                                key: 'Estate',
                                value: 'Estate'
                            }


                        ]
                        }
        onEvent={(event, value) => this.handleDropDownChange(event, value)}
                    />
                    <Button
                        value="NEXT"
                        className="next_btn"
                        id="SMDEmployer_schedulepayment_next-button"
                        onEvent={e => this.clickHandlernextBtn(e)}
                    />
                </div>
            </div>
        );
    }
}
export default Modal;

personModal.component

import React, { Component } from 'react';
class personModal extends Component {
 constructor(props) {
    super(props);
    this.state = {
        dropDownValue: ''
    };
 }  
 render() {
  return (            
    <div>
        {'Hi PersonModal here'}
    </div>
  );
 }
}
export default personModal;

备注 :按钮是自定义组件，工作正常。

Answer 1

我有同样的问题。其简单的解决方案是导入具有以大写字母开头的自定义名称的组件。