我正在学习反应，看来我无法在类组件中定义功能组件，还是我做错了什么？

Question

正如标题所说，试图在我的班级中声明一个组件，但是会遇到一个不确定的错误。我不能这样做还是做错了？正如我所说，我是新手反应，因此任何信息都会有所帮助。总体目标是创建一个表单，但我只是尝试根据以前的选项来弹出某些选项。如果代码太多让我知道，我会将其修剪为导入的内容，但我认为我会提供整个事情，因为它不长。

import React, {useState, useMemo} from 'react';
import ReactDOM from 'react-dom/client';
import countryList from 'react-select-country-list';
import './index.css';
//import App from './App';


class StartForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.options = countryList().getData();
  }

  handleChange(event) {
    this.setState({[event.target.name]: event.target.value});
    //alert('Your favorite flavor is: ' + this.state.value);
    console.log(this.state.accType);
  }

  handleSubmit(event) {
    //alert('Your favorite flavor is: ' + this.state.value);
    //event.preventDefault();
  }

//------------------- THIS COMPONENT
  CustomOptions(props) {
    return(
        <label>
          <input type="checkbox" id="acss_debit_payments" name="acss_debit_payments" value={this.value.acss_debit_payments} onChange={this.handleChange} />Paneer
        </label>
      );
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Select Account Type:
          <select name="accType" value={this.state.accType} onChange={this.handleChange}>
            <option value="custom">Custom</option>
            <option value="express">Express</option>
            <option value="standard">Standard</option>
          </select>
        </label>
        <br/>
        <label>
          Select Country Code(Optional):
          <select name="country" options={this.options} value={this.state.country} onChange={this.handleChange}/>
        </label>
        <br/>
        <label>
          Email:
          <input type="text" name="email" value={this.state.email} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />

        {this.state.accType == "custom" &&
          <CustomOptions />
      }

      </form>
    );
  }
}


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <StartForm/>
  </React.StrictMode>
);

Answer 1

要调用自定义您需要使用 this 的当前实例：

<this.CustomOptions />

示例： https://codesandbox.io/s/happy-swartz-hsm6ng?file=%2FSRC%2fapp.js