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

用作 personModal 的 <personModal /> 组件将被解释为 HTML 标记，因为它以小写字母开头。要使用组件，请将组件重命名为 PersonModal 或任何其他以大写开头的名称。

Answer 2

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

Answer 3

在最新的 React 版本中，您不需要导入。如果你得到 'React' must be in scope when using JSXeslintreact/react-in-jsx-scope 然后在你的 eslint 文件中关闭它：

"react/react-in-jsx-scope": "off",

Answer 4

在我的设置中，我只需要将文件结尾更改为 .tsx，而不是 .ts。如果您使用的是 JavaScript，则等效的可能是将 .js 文件更改为 .jsx 文件。

React Error：已声明，但从未读取其值。 [6133]

4 个答案: