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

我这是为了使不同类型的场为我的形式组成一个简单的组件：渲染组件时如何使用点符号？

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

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

回答

相关问题