q-antd/component/flexbox/index.js

双绑形式的antd。受控组件的双绑、Form表单验证

import React from 'react';

export default class Flexbox extends React.Component {
  render() {
    const {
      style,
      children,
      alignItems,
      justifyContent,
      flexDirection,
      ...remain
    } = this.props;

    return (
      <div
        style={{
          display: 'flex',
          alignItems,
          justifyContent,
          flexDirection,
          ...style,
        }}
        {...remain}>
        {children}
      </div>
    );
  }
}

class Block extends React.Component {
  render() {
    const { style, children, ...remain } = this.props;
    return (
      <div style={{ ...style }} {...remain}>
        {children}
      </div>
    );
  }
}

class Flex extends React.Component {
  render() {
    const { style, children, flex = 1, ...remain } = this.props;

    return (
      <div style={{ flex, ...style }} {...remain}>
        {children}
      </div>
    );
  }
}

Flexbox.Flex = Flex;
Flexbox.Block = Block;