logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.25.4
  • CSS in v6
  • 👀 Visual Regression Testing
  • Why is it so hard to disable the date?
  • HOC Aggregate FieldItem
  • Line Ellipsis Calculation
  • 📢 v4 surpassed maintenance period
  • Type Util
  • A build ghost
  • Ant Design meets CSS Variables
  • Historical Debt of API
  • Stacked Notification
  • Color Models and Color Picker
  • Extends Theme
  • Virtual Table is here!
  • Happy Work Theme
  • Where is the dynamic style?
  • Suspense breaks styles
  • Bundle Size Optimization
  • Hi, GitHub Actions
  • To be what you see
  • Pain of static methods
  • SSR Static style export
  • Dependency troubleshooting
  • Contributor development maintenance guide
  • Repost: How to submit a riddle
  • Tooltip align update
  • Unnecessary Rerender
  • How to Grow as a Collaborator
  • Funny Modal hook BUG
  • about antd test library migration
  • Tree's check conduction
  • Some change on getContainer
  • Component-level CSS-in-JS

To be what you see

2023-05-10
@zombieJ

Articles are included in the column:

antd

Ant Design

A UI design system
Go to discuss
antd

Ant Design

Ant Design official column
Go to discuss
antd

Ant Design

Juejin logoAnt Design Open Source Column
Juejin logoGo to discuss
contributors
  • Hi, GitHub ActionsPain of static methods

    Resources

    Ant Design X
    Ant Design Charts
    Ant Design Pro
    Pro Components
    Ant Design Mobile
    Ant Design Mini
    Ant Design Web3
    Ant Design Landing-Landing Templates
    Scaffolds-Scaffold Market
    Umi-React Application Framework
    dumi-Component doc generator
    qiankun-Micro-Frontends Framework
    Ant Motion-Motion Solution
    China Mirror 🇨🇳

    Community

    Awesome Ant Design
    Medium
    Twitter
    yuque logoAnt Design in YuQue
    Ant Design in Zhihu
    Experience Cloud Blog
    seeconf logoSEE Conf-Experience Tech Conference

    Help

    GitHub
    Change Log
    FAQ
    Bug Report
    Issues
    Discussions
    StackOverflow
    SegmentFault

    Ant XTech logoMore Products

    yuque logoYuQue-Document Collaboration Platform
    AntV logoAntV-Data Visualization
    Egg logoEgg-Enterprise Node.js Framework
    Kitchen logoKitchen-Sketch Toolkit
    Galacean logoGalacean-Interactive Graphics Solution
    xtech logoAnt Financial Experience Tech
    Theme Editor
    Made with ❤ by
    Ant Group and Ant Design Community

    With daily development, have you thought about a problem. When the range limit is different from the actual value, how should we deal with it? Suppose we have a display component that simply displays your value:

    tsx
    interface StrProps {
    value: string;
    }
    function MyStr({ value }: StrProps) {
    return <div>{value}</div>;
    }
    <MyStr value="Hello World" />;

    Without a doubt, Hello World should be displayed on the page. Next, we add a scope limit:

    tsx
    interface StrProps {
    value: string;
    maxLen?: number;
    }

    What should be displayed if we use a value out of range at this time?

    tsx
    <MyStr value="Hello World" maxLen={5}>

    "Obviously", since you have maxLen, you should display Hello instead of Hello World.

    But this intuitive approach is not correct in all cases. If you use native input, you will find that the behavior is not like this:

    tsx
    <input value="Hello World" maxLength={5} />
    input limit

    As described by the standard, maxLength only limits user input. Is this standard wrong?

    A form control maxlength attribute, controlled by the dirty value flag, declares a limit on the number of characters a user can input.

    "Unnecessary over design"

    With the above questions in mind, we imagine an input scenario. Now you have an e-commerce system, set prices for products:

    tsx
    <Form>
    <Form.Item label="Name" name="name">
    <Input />
    </Form.Item>
    <Form.Item label="Price" name="price">
    <InputNumber />
    </Form.Item>
    </Form>
    Form

    One day your manager said that the price of our product cannot exceed $99 according to regulations, and you have to set the limit directly on the form. This change is not difficult:

    diff
    -- <InputNumber />
    ++ <InputNumber max={99} />

    But for existing products, we obviously cannot restrict them directly on the form. Otherwise, when the user edits the product, he will find that the price of his product has been changed. This is obviously unreasonable.

    Form modify

    (Users will never be able to understand why the data in the background does not match what they see)

    In fact, in many scenarios, components should not directly modify the actual value. Especially for input components, changing the display value without authorization will have very serious consequences.

    To be what you see

    At the component library level, we cannot "guess" the user's usage scenarios, so we need to implement the processing of boundary scenarios in the most conservative way. But at the same time, we can actually do some optimization methods. For example, set the restriction to the rules of Form.Item, and use the form validation ability to make restrictions:

    Form rules

    For some components themselves, it is also possible to add explicit style reminders:

    InputNumber

    For non-input custom components, you can also consider reminding users through design. For example, we can add a Tooltip to the display component:

    tsx
    // Same demo we've seen before
    <MyStr value="Hello World" maxLen={5}>
    Customize

    Or use some other display way:

    Ellipsis

    Finally

    Boundary scenarios need to be carefully handled when developing components. In complex system, upstream users may not know how your internal logic is handled. Therefore, as the complexity and usage scenarios increase, we recommend always choosing a conservative approach to the default behavior. For situations that do not meet the requirements, it can be implemented in the form of HOC or some additional Props configuration, so as to prevent developers from having too many agreements when using it without knowing it.