Wie verwende ich die Punktnotation beim Rendern von Komponenten?

Ich habe eine einfache Komponente, die angeblich andere Art von Feldern in meine Form Komponente zu machen:Wie verwende ich die Punktnotation beim Rendern von Komponenten?

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

Und ich bin mit dieser Komponente in meiner Form Komponente wie folgt aus:

export default class SubmitForm extends React.Component { 

    render() { 
    return (
     . 
     . 
     . 
     <Field 
      type="text" 
      placeholder="something" 
      name="something" 
     /> 
     <Field 
      type="textarea" 
      placeholder="another" 
      name="othername" 
     /> 
     . 
     . 
     . 
    ) 
    } 
}

Was Ich denke daran, meine Feldkomponente irgendwie zu implementieren, um Punktnotation verwenden zu können, wie in Using Dot Notation for JSX components erklärt, die ich viele andere Bibliotheken gesehen habe und ich möchte diese Komponente so verwenden können:

<Field.Text name="sth" placeholder="sth" /> 
<Field.TextArea name="other" placeholder="other stuff" />

Aber ich kann es nicht tun, wie in React docs erwähnt. Wie kann ich das machen?

Quelle

2017-07-05 Taxellool

Erstellen Sie einfach einzelne Komponenten und exportieren sie unter Namen:

//Field.js 
class TextArea extends React.Component { 
    ... 
} 

class Text extends React.Component { 
    ... 
} 

export { Text, TextArea };

Dann importieren alle Namen aus dem Modul:

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

Oder wenn Sie exportieren möchten einen Standard-Objekt wie so (was genau das, was das Beispiel aus der Dokumentation gerade mal anders macht):

export default { Text, TextArea };

Welches wird object shorthand properties verwenden und ein Standardmember - ein Objektliteral exportieren. Dann können Sie es wie so importieren:

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

Und schließlich:

<Field.TextArea ... />

Oder die Punktnotation loszuwerden (Sie dies nicht mit der Standard-Exportoption tun können!):

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

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

natürlich geht genau durch die Dokumentation reagieren, könnten Sie tun, mit Klasse Ausdrücke:

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;

Anschließend als Standardelement importieren und Punktnotation verwenden.

Quelle

2017-07-05 04:14:36 Li357

so eigentlich kein Punkt ist, diese Punktnotation bei der Erreichung, denke ich. und ich sollte sowieso separate Komponenten erstellen. und finden Sie einen Weg, um gegenseitige Event-Handler und andere Sachen zwischen diesen Komponenten zu teilen. Ist das der einzige Weg? Ich meine, ich habe andere Bibliotheken wie react-reducx-form gesehen, die etwas wie oder . tun sie das auch, wenn sie nur unter dem Namen Control exportieren? – Taxellool

@Taxellool Nun, es ist hauptsächlich für organisatorische Zwecke. Sie haben nur einen Namensraum wie 'Field', um alle ihre Feldtyp-Komponenten zusammenzufassen und den Namespace zu exportieren. – Li357

danke. Der letzte Abschnitt Ihrer Antwort hat mich tatsächlich dazu gebracht, die in den Dokumenten beschriebene Vorgehensweise zu verstehen. Jedenfalls sehe ich keinen Grund, dies weiter zu verfolgen. der ganze Zweck der "Punktnotation" scheint für das Organisieren zu sein, wie Sie sagten. Und separate Komponenten müssen in beide Richtungen definiert werden. Danke für deine Antwort. – Taxellool

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

chnage dies wie folgt

const Field = { 
    text: function(){ 
     // your text code 
    } 
} 

export default Field;

gleiche Art, wie sie in der Facebook erwähnt reagieren docs. Anstelle der Komponente können Sie Objekte zurückgeben, die Ihre Funktionen enthalten.

Quelle

2017-07-05 04:20:12 suyesh

"Aber ich kann es nicht so machen, wie in den reaktiven Dokumenten erwähnt". – Li357

Folgen Sie einfach den Anweisungen.

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

Dann, wenn Ihr Punkt Nutzung

<Field.Text placeholder="something" name="something" />

Quelle

2017-07-05 04:24:49

Wie verwende ich die Punktnotation beim Rendern von Komponenten?

Antwort

Verwandte Themen