如何创建并导出支持Form.Input点语法调用的React组件

核心原理 #

JavaScript中函数本身属于对象类型，不管是函数组件还是类组件，都可以直接挂载自定义属性，只要把Input、Select等子组件作为属性挂载到Form组件上，就能实现Form.Input的调用形式。

具体实现步骤 #

1. 编写独立子组件 #

和普通React组件的写法完全一致，分别实现Input、Select等子组件：

//  components/Form/Input.jsx
const Input = (props) => {
  // 自定义Input的逻辑和样式
  return <input {...props} className="form-input" />
}
export default Input

//  components/Form/Select.jsx
const Select = (props) => {
  // 自定义Select的逻辑和样式
  return <select {...props} className="form-select" />
}
export default Select

2. 编写主Form组件并挂载子组件 #

引入子组件后，直接绑定为Form的属性即可：

//  components/Form/index.jsx
import Input from './Input'
import Select from './Select'

// 主Form组件实现
const Form = (props) => {
  // 自定义Form的逻辑和样式
  return <form {...props} className="form-wrapper" />
}

// 把子组件挂载到Form的属性上
Form.Input = Input
Form.Select = Select

export default Form

3. 按需求调用 #

导入后就可以直接使用点语法调用子组件，和你示例的用法完全匹配：

import Form from '../components/Form'

const MyComponent = (props) => {
  return (
    <Form onSubmit={props.onSubmit}>
      <Form.Input name="username" placeholder="请输入用户名" />
      <Form.Select name="role">
        <option value="admin">管理员</option>
        <option value="user">普通用户</option>
      </Form.Select>
    </Form>
  )
}

类组件的兼容写法 #

如果主Form是类组件，也可以用静态属性的方式实现：

import React from 'react'
import Input from './Input'
import Select from './Select'

class Form extends React.Component {
  // 直接在类内部声明静态属性挂载子组件
  static Input = Input
  static Select = Select

  render() {
    return <form {...this.props} className="form-wrapper" />
  }
}

export default Form

内容的提问来源于stack exchange，提问作者Gaurav