渲染组件时如何利用点符号？

Question

我有一个简单的组件，应该将不同类型的字段呈现到表单组件中：

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文档中提到的方式进行操作。我怎样才能做到这一点？

Answer 1

只需创建单个组件并以名称导出它们：

//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;

然后导入为默认成员并使用点表示法。