web-dev-qa-db-ja.com

コンポーネントをレンダリングするときにドット表記を利用するにはどうすればよいですか？

さまざまな種類のフィールドをフォームコンポーネントにレンダリングすることになっている単純なコンポーネントがあります。

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ドキュメントに記載されている方法でそれを行うことはできません。どうすればこれを行うことができますか？

reactjsecmascript-6react-jsxes6-modules
7
Taxellool

個々のコンポーネントを作成し、名前でエクスポートするだけです。

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

次に、デフォルトのメンバーとしてインポートし、ドット表記を使用します。

14
Andrew Li

単にドキュメントに従ってください。

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" />
1
Fuzail l'Corder
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ドキュメントで言及したのと同じ方法です。コンポーネントの代わりに、関数を含むオブジェクトを返すことができます。

0
suyesh