渲染组件时如何使用点符号?

How do I utilize dot notation when rendering components?

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

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

或者,要删除点符号(您不能使用默认导出选项执行此操作!):

import { Text, TextArea } from './path/to/Field.js';

<Text ... />
<TextArea ... />

当然,完全按照 React 文档,您可以使用 class 表达式:

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;

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

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 反应文档中提到的方式相同。您可以 return 包含您的函数的对象而不是组件。

只需按照文档操作即可。

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