组件：

1. 应用组件：这将是顶级组件

2. 按钮组件（如果它只是一个按钮，也可以只是一个按钮）：如果这只是一个按钮，您可以将其保留在 中App component，如果您愿意将其与某些自定义元素重用，请将其放置在组件中。

3. 模态组件：这将保存您的模态，如页眉、正文、页脚
4. 表单组件：这是一个保存表单及其验证的组件。

组件树：

App 组件将包含类似showModal的状态，我们需要有一个处理程序来设置此值，并且在单击按钮时会触发此处理程序。

import FormModal from './FormModal';   

class App extends React.Component {
   state = {
    showModal : false
  }

  showModalHandler = (event) =>{
    this.setState({showModal:true});
  }

  hideModalHandler = (event) =>{
    this.setState({showModal:false});
  }

  render() {
    return (
      <div className="shopping-list">
        <button type="button" onClick={this.showModalHandler}>Click Me! 
        </button>
      </div>
      <FormModal showModal={this.sate.showModal} hideModalHandler={this.hideModalHandler}></FormModal>
    );
  }
}

形式模态：

import FormContent from './FormContent';

class FormModal extends React.Component {
  render() {
    const formContent = <FormContent></FormContent>;
    const modal = this.props.showModal ? <div>{formContent}</div> : null;
    return (
      <div>
        {modal}
      </div>
    );
  }
}

export default FormModal;

希望有所帮助！

对于基本伪代码

主要组件：

import Modal from './Modal'
class Super extends React.Component {
    constructor(){
        this.state={
            modalShowToggle: false
        }
    }
    ModalPopUpHandler=()=>{
        this.setState({
            modalShowToggle: !modalShowToggle
        })
    }
    render(){
        return(){
            <div>
                <Button title='ModalOpen' onClick='this.ModalPopUpHandler'> </Button>
                <ModalComponent show={this.state.modalShowToggle}>
            </div>
        }
    }
}

ModalPopUp 组件：

import FormComponent from 'FormComponent'
class ModalComponent extends React.Component {
    constructor(props){
        super(props)
        this.state={
            modalToggle: props.show
        }
    }
    render(){
        if(this.state.modalToggle){
            return(
                <div> 
                    <div className='ModalContainer'>
                        <FormComponent />
                    </div>
                </div>
            )
        } else {
            </div>
        }
    }
}

表单组件：

import Button from './Button'
class FormComponent extends React.Component {
    constructor(){
        this.state={
            submitButtonToggle: true,
            username: ''
        }
    }

    inputHandler=(e)=>{
        if(e){
            this.setState({
                username: e.target.value
            })
        }
    }

    render(){
        return(
            <div>
                <input type='text' value='this.state.username' id='username' onChange='inputHandler' />
                <Button title='Submit' disabled={this.state.username.length > 0}> </Button>
            </div>
        )
    }
}

以上是我们在 app/main 入口文件中渲染的基本超级组件。并形成 || 模态组件。是子组件。

所以在模态组件中我调用了相同的表单组件。

在表单组件输入类型处理程序中，提交按钮从状态中禁用..输入字符串长度我们正在处理其验证。

我希望这个对你有用。