交換クラス名

Question

returnは、我々はユーザー定義の文字列とクラス名を置き換えることはできませんなぜ、文字列を返す、以来これは私が

var longTextList = this.props.data.map(function(text, index){ 
         return <Thumbnail key={index} style={fontSize} ><div style={fontFamily}><img src={text.sprite} />{text.longText} and get {coinName}(s)</div></Thumbnail>; 
         }); 

何をすべきか、現在あります。

たとえば、<Thumbnail>と<{this.props.type>との間では、this.props.type=Thumbnailです。

EDIT

私はタイプがサムネイルをレンダリングするために教えてくれるこの

<CardView data={actionList} fontSize={fontSize} fontFamily={fontFamily} coinName={coinName} type="Thumbnail"/> 

のように私のクラスを呼んでいます。

CardView.js

で

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Thumbnail } from 'react-bootstrap'; 


const CardView = React.createClass({ 


    render() { 
     var fontFamily = this.props.fontFamily; 
     var fontSize = this.props.fontSize; 
     var coinName = this.props.coinName; 
     var Type = this.props.type; 
var longTextList = this.props.data.map(function(text, index){ 
         return <Type key={index} style={fontSize} ><div style={fontFamily}><img src={text.sprite} />{text.longText} and get {coinName}(s)</div></Thumbnail>; 
         }); 


     return (
      <div>{longTextList}</div> 
      ); 
    } 
}); 

export default CardView; 

あなたがいる限り、この文字列は、大文字で始まるなどの文字列でクラス名を置き換えることができますエラー

Expected corresponding JSX closing tag for <Type> 

Answer 1

に直面。コンポーネントの最初の文字を大文字にするのはJSX標準です。標準のHTMLタグとコンポーネントを表すカスタムタグとの間に違いをつけることは便利です。その結果tags vs react components

、たとえば、あなたは、ドット表記を使用することができます：ドット表記上の続きを読む<MyVar.mytype/>

あなたが動的にテキスト変数"Tumbnail"を使用してコンポーネントタイプを定義する場合は、あなたが参照する必要があり、中にコンポーネントタイプに関連するコンポーネント。それ以外の場合は、蒸散によってどのコンポーネントを使用するかを推測することはできません。

あなたがしなければならない

：

をファイル名MyComponent.jsで：

var Type = MyComponents[this.props.type]; 
return <Type/>; 

Answer 2

あなたは文字列をバイパスし、ちょうど渡すことができます。

import { Thumbnail } from 'react-bootstrap'; 
const MyComponents={ 
    Thumbnail 
}; 
export default MyComponents; 

インポートMyComponentとは、コンポーネントを反応させるのでは小道具をタイプしますか？

import { Thumbnail } from 'react-bootstrap'; 

<CardView data={actionList} fontSize={fontSize} fontFamily={fontFamily} coinName={coinName} type={Thumbnail}/> 

CardView.js

で今

import React from 'react'; 
import ReactDOM from 'react-dom'; 

const CardView = React.createClass({ 

    render() { 
     var fontFamily = this.props.fontFamily; 
     var fontSize = this.props.fontSize; 
     var coinName = this.props.coinName; 
     var Type = this.props.type; 
     var longTextList = this.props.data.map(function(text, index){ 
           return <Type key={index} style={fontSize} ><div style={fontFamily}><img src={text.sprite} />{text.longText} and get {coinName}(s)</div></Type>; 
          }); 

     return (
      <div>{longTextList}</div> 
      ); 
    } 
}); 

export default CardView;