Reactjs 用字符串替换类名

这就是我目前所做的

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

其中type告诉我们渲染缩略图

在cardwiew.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;

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;

面对误差

Expected corresponding JSX closing tag for <Type> 

---

只要字符串以大写字母开头，就可以用字符串替换类名。JSX标准要求组件的首字母大写。区分标准HTML标记和表示组件的自定义标记很有用。请阅读有关点符号的更多信息：

因此，例如，您可以使用点表示法：

如果使用文本变量Tumbnail动态定义组件类型，则必须在字典中引用与组件类型相关的组件。否则，transpilation无法猜测要使用哪个组件

你必须做到：

在文件名MyComponent.js中：

在React组件中，导入MyComponent并：

---

你能绕过字符串，把类型作为道具传递吗

import { Thumbnail } from 'react-bootstrap';

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

现在在cardwiew.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;

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;

---

对不起，我想不起来。你能再解释一下吗？我从你的答案中得到的是，如果我指定MyVar=this.props.type，那么我可以将我的设置更改为，但它不起作用，正如你的示例中所写，如果this.props.type=Thumbnail，MyVar=this.props.type应该起作用。在您的案例中如何定义this.props.type？请参阅编辑。感谢您的快速回复，但不幸的是，它不起作用。仍然面临与上一次编辑中所述相同的错误。在您的编辑中，您没有在结尾处关闭类型。替换为您得到的错误是因为您仍然在map函数中有而不是，但是，我不相信修复此错误将允许您执行您想要的操作。看看我的答案吧，见鬼！是的，就是这样。显然，我的文本编辑器不在word wrap上，而另一个标签不在屏幕上，所以忘了它。很抱歉P

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;