我有一个简单的组件,应该将不同类型的字段渲染到我的表单组件中:
import React from "react";
export default class Field extends React.Component {
render() {
switch (this.props.type) {
case 'textarea': {
return (
<div className="col-xs-12">
<textarea
placeholder={this.props.placeholder}
name={this.props.name}
>
</textarea>
</div>
)
}
case 'text': {
return (
<div className="col-md-6 col-lg-4">
<input
type="text"
placeholder={this.props.placeholder}
name={this.props.name}
/>
</div>
)
}
}
}
}
我在我的表单组件中使用这个组件,如下所示:
export default class SubmitForm extends React.Component {
render() {
return (
.
.
.
<Field
type="text"
placeholder="something"
name="something"
/>
<Field
type="textarea"
placeholder="another"
name="othername"
/>
.
.
.
)
}
}
我的想法是以某种方式实现我的字段组件,以便能够使用点表示法,如对 JSX 组件使用点表示法中所述,我已经看到了许多其他库,我希望能够像这样使用这个组件:
<Field.Text name="sth" placeholder="sth" />
<Field.TextArea name="other" placeholder="other stuff" />
但我不能按照 React 文档中提到的方式做到这一点。我该怎么做?
只需创建单独的组件并以名称导出它们:
//Field.js
class TextArea extends React.Component {
...
}
class Text extends React.Component {
...
}
export { Text, TextArea };
然后从模块导入所有名称:
import * as Field from './path/to/Field.js';
或者,如果您更喜欢像这样导出默认对象(这正是文档中的示例所做的,只是以不同的方式):
export default { Text, TextArea };
它将使用对象速记属性并导出默认成员——对象文字。然后你可以像这样导入它:
import Field from './path/to/Field.js';
最后:
<Field.TextArea ... />
或者,摆脱点符号(您不能使用默认导出选项执行此操作!):
import { Text, TextArea } from './path/to/Field.js';
<Text ... />
<TextArea ... />
当然,完全按照 React 文档,你可以使用类表达式:
const Field = {
Text: class Text extends React.Component { //you can omit the class name here
//can be stateless functional component if you don't need state
},
TextArea: class TextArea extends React.Component {
}
}
export default Field;
然后导入为默认成员并使用点表示法。
只需按照文档操作即可。
const Field = {
Text: function Text(props) {
return <div className="col-md-6 col-lg-4">
<input
type="text"
placeholder={this.props.placeholder}
name={this.props.name}
/>
</div>;
},
Textarea: function Textarea(props) {
return <div className="col-xs-12">
<textarea
placeholder={this.props.placeholder}
name={this.props.name}
>
</textarea>
</div>;
}
}
然后当你的点使用时
<Field.Text placeholder="something" name="something" />
export default class Field extends React.Component {
render() {
switch (this.props.type) {
case 'textarea': {
return (
<div className="col-xs-12">
<textarea
placeholder={this.props.placeholder}
name={this.props.name}
>
</textarea>
</div>
)
}
case 'text': {
return (
<div className="col-md-6 col-lg-4">
<input
type="text"
placeholder={this.props.placeholder}
name={this.props.name}
/>
</div>
)
}
}
}
}
将其更改为以下方式
const Field = {
text: function(){
// your text code
}
}
export default Field;
他们在 Facebook React 文档中提到的方式相同。您可以返回包含您的函数的对象,而不是组件。
我的工作打字稿代码用于延迟导入点符号模块。例如 'rsuite' 库中的 Nav、Nav.Item、Nav.Menu`(反应套件)
const Nav = React.lazy(() => import('rsuite/esm/Nav'));
const NavItem = React.lazy(
() => import('rsuite/esm/Nav').then(module => ({
default: module.default.Item,
})),
);
const NavMenu = React.lazy(
() => import('rsuite/esm/Nav').then(module => ({
default: module.default.Menu,
})),
);
用法
<Nav>
<NavItem icon={<HomeIcon />} href="/page">
Home
</NavItem>
<NavItem href="/page/google/login">Login</NavItem>
<NavMenu title="Tools">
<NavItem onClick={navItemClick} href="/page/bot-detect">
Selenium Checker
</NavItem>
<NavItem onClick={navItemClick} href="/page/moment-timezone">
Moment Timezone Playground
</NavItem>
<NavItem onClick={navItemClick} href="/page/cookies">
Cookie Manager
</NavItem>
</NavMenu>
</Nav>