I'm new to React and using React-bootstrap ([email protected] and [email protected]). There are so many different versions floating around that it's hard to determine which is the latest documentation. For example, looking at https://react-bootstrap.github.io/components/forms/, there is mention of <Form> and <FormControl>. Not to be confused with <Form.Control>. What is the difference? Where is <FormControl> documented?

CodePudding user response：

Is the same thing, but I recommended you to use <Form.Control> In order to avoid some issues.

CodePudding user response：

Don't get hung up on the dot. It's an import thing, I'll give you an example.

Let's say I have a "file" with multiple exports in it, one is a "Control" function, one is an "Input" function, one is a "Radio" function, and one is a "Checkbox" function.

If I want to use those in another "file", I can import all the functions under one name, or "variable", let's say I choose to call the import "Form" because that's what those functions are used for.

Now when I use those in other components or "files" I have to call the "Form" variable first to access the functions. And it would look like so:

I'm using the Input function so I would call the function as <Form.Input />, or <Form.Radio /> if I want to use the Radio function. The "Form" variable is only helping me access Input and Radio.

Bootstrap will put a lot of functions in one file and export it under one variable and use a suitable name to group them all, in this case it's "Form".

It's simply done to make the folder structure cleaner, I hope this help.