Question

目前我正在做的事情

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

因为return返回一个字符串，为什么我们不能用用户定义的字符串替换类名。

例如<Thumbnail> <{this.props.type> this.props.type=Thumbnail。

修改

我正在这样打电话给我的班级

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

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

在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中：

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

在您的React组件中，导入MyComponent和：

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

Answer 2

你可以绕过字符串并将类型作为道具传递吗？

 Button downloadButton = new Button("Download");
    Exporter exporter = new Exporter();
    downloadButton.addClickListener(clickEvent -> {
     //something here
    });
    exporter.getFileDownloader().extend(downloadButton);

现在在CardView.js

class Exporter{
    private FileDownloader fileDownloader;

    Exporter() {
        StreamResource streamResource = createResource();
        fileDownloader = new FileDownloader(streamResource);
    }

    private StreamResource createResource() {
        return new StreamResource(new StreamResource.StreamSource() {
            @Override
            public InputStream getStream() {
            // some logic here
            }
        }, "myfile.csv");
    }

    FileDownloader getFileDownloader() {
        return fileDownloader;
    }

    ...

用字符串Reactjs替换类名

2 个答案: