如何创建和导出像ComponentA.ComponentB这样的响应组件

Question

这听起来很简单，但我找不到任何文章/资源，所以在这里询问。

如何创建像Form这样的组件。输入表单。选择和使用如下-

import Form from '../Form';
...
const MyComponent = (props) => {
...
return (
<Form>
<Form.Input />
<Form.Select />
</Form>
);
}

所以我基本上想了解Form组件是什么样子的，它的行为就像一个具有子输出的对象，如Input作为Form.Input和Form.Select。

我在一些地方见过这样的代码。我们也用React.Component，不是吗?我只知道导出默认和命名组件，所以我可以创建不同的导出，如输入和选择，但不知道如何导出表单。输入可以工作吗?

Answer 1

点符号可能使它看起来像一个子组件，但它只是附加到Form组件的另一个组件。看一下codesandbox示例

基本上，你有一个组件Form:

export const Form = (props) => {
const Item = ({ children }) => <p> {children} </p>;
Form.Item = Item;
return <div>{props.children}</div>;
};

你可以这样访问:

import "./styles.css";
import { Form } from "./Form";
export default function App() {
return (
<Form>
<Form.Item> Test </Form.Item>
<Form.Item> Test 2 </Form.Item>
</Form>
);
}

Answer 2

您可以在导出之前将它们添加到表单组件中:

import React from 'react';
const Form = ({ Input, Select, children }) => (
...
);
const Input = ({ children }) => children;
Form.Input = Input;
const Select = ({ children }) => children;
Card.Select = Select;
export default Form;

如果你想要更多的信息在这里:https://dev.to/shayanypn/buckle-with-react-sub-component-10ll

Answer 3

On file Form.js

export default {
Input,
Select,
}
const Input = (props) => {
// xyz
}
const Select = (props) => {
// xyz
}