动态呈现的标记总是小写的

Question

我正在尝试输出一些SVG并从列表中输出它们，下面是我的渲染方法：

render() {

        const renderTag = () => {
            const Tag = this.props.id
            return(<Tag />)
        } 

        return (
            <div key={this.props.name} className="social-box">
                <a className={this.props.id + "-link"}> 
                    {renderTag()}
                </a>
            </div>
        )
    }

但是，DOM节点总是小写的，即




Answer 1

我终于找到了答案@汤姆门德尔森几乎得到了答案，但还需要进一步充实。

@ShubhamKhatri建议在render方法之外创建组件的函数实际上完成了这项工作。以下是最终代码：

import React from 'react';
import Facebook from './svg/Facebook';
import LinkedIn from './svg/LinkedIn';
import Twitter from './svg/Twitter';
import Pinterest from './svg/Pinterest';

class SocialMediaBox extends React.Component {

    renderElement(item) {
        const Components = {
            'Facebook': Facebook,
            'Twitter': Twitter,
            'Pinterest': Pinterest,
            'LinkedIn': LinkedIn 
        }
        return React.createElement(Components[item], item);
    }

    render() {

        const Element = this.renderElement(this.props.id)

        return 
        (
            <div>
                {Element}
            </div>
        )
    }
}

export default SocialMediaBox;

Answer 2

我建议您看看这篇关于动态组件的文章。

文章中最相关的例子是：

import React, { Component } from 'react';
import FooComponent from './foo-component';
import BarComponent from './bar-component';
class MyComponent extends Component {
    components = {
        foo: FooComponent,
        bar: BarComponent
    };
    render() {
       const TagName = this.components[this.props.tag || 'foo'];
       return <TagName />
    }
}
export default MyComponent;

很可能可以呈现的组件数量有限，因此可以创建一个字典，其中包含组件本身的键（组件名称）（如示例所示），并以这种方式使用它：

import Facebook from './FaceBook';
import Twitter from './Twitter';

const components = {
   facebook: Facebook,
   twitter: Twitter
};
    render() {
            return <div key={this.props.name} className="social-box">
                    <a className={this.props.id + "-link"}> 
                        <components[this.props.id] />
                    </a>                
</div>;

    }

Answer 3

这是React的一个技术实现，所有标记在这一行上都是小写的，因为不可能呈现非小写的标记，这是出于设计。

在这里阅读更多。