我有一个简单的组件，应该将不同类型的字段渲染到我的表单组件中:

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" 
        /> 
        . 
        . 
        . 
    ) 
  } 
} 

我想要的是以某种方式实现我的字段组件，以便能够使用点表示法，如 Using Dot Notation for JSX components 中所述。我见过许多其他库，我希望能够像这样使用这个组件:

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

这将使用 object shorthand properties并导出一个默认成员——一个对象文字。然后你可以像这样导入它:

import Field from './path/to/Field.js'; 

最后:

<Field.TextArea ... /> 

或者，摆脱点符号(使用默认导出选项无法执行此操作!):<​​/p>

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; 

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