渲染組件時如何使用點符號？

我這是爲了使不同類型的場爲我的形式組成一個簡單的組件：渲染組件時如何使用點符號？

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文檔中提到的方式來做。我怎樣才能做到這一點？

來源

2017-07-05 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 };

這將使用object shorthand properties並導出默認成員 - 對象文字。然後你就可以像這樣導入：

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

最後：

<Field.TextArea ... />

或者，擺脫點號的（你不能使用默認導出選項做到這一點！）：

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

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

當然，由文檔做出反應正好要去，你可以做，用類表達式：

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;

然後導入爲默認成員並使用點符號。

來源

2017-07-05 04:14:36 Li357

所以實際上是實現這個點表示我猜是沒有意義的。而且我應該創建單獨的組件。並找到一種方法來共享這些組件之間的相互事件處理程序和其他內容。這是唯一的方法嗎？我的意思是我見過其他類似react-redux-form的庫，它提供了類似於或的。他們是否也只是以Control的名義出口？ – Taxellool

@Taxellool嗯，它主要是爲了組織目的。它們只有一個名爲Field的名稱空間，用於將所有字段類型組件組合在一起，並導出名稱空間。 – Li357

謝謝。你答案的最後一部分實際上讓我明白了在文檔中解釋的方式。無論如何，現在我沒有看到有理由繼續這樣做了。「點符號」的全部目的似乎是用來組織你說的。單獨的組件必須以任何一種方式定義。感謝您的回答。 – 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這種如下方式

他們在Facebook上提到

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

export default Field;

同樣的方式作出反應的文檔。您可以返回包含您的函數的對象而不是組件。

來源

2017-07-05 04:20:12 suyesh

「但我不能按照反應文檔中提到的方式來完成它」。 – Li357

只需按照文檔。

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

來源

2017-07-05 04:24:49

渲染組件時如何使用點符號？

回答

相關問題