Question

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

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节点始终是小写的，即<facebook>而不是<Facebook> this.props.id正确地以Facebook的形式呈现给控制台。任何人都可以告诉我为什么反应或浏览器错误地呈现为小写，因此不是组件，以及如何解决？

Answer 1

这是React的技术实现，所有标签都在此行here上小写，AFAIK无法呈现非小写标签，这是设计的。

了解更多here。

Answer 2

我建议您查看有关动态组件的this article。

文章中最相关的例子：

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

我最终找到了答案。 @TomMendelson几乎得到了答案，但它需要更多的充实。

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

Flat[ x * height * depth + y * depth + z ] = elements[x][y][z] 
where [WIDTH][HEIGHT][DEPTH]

Answer 4

感谢您的提问和回答；除了在Dynamic tag name in jsx and React中给出的答案之外，它们还帮助我找到了适合自己的解决方案（在安装了gatsby-plugin-react-svg的Gatsby中制作了功能组件）：

import React from "react"
import FirstIcon from "../svgs/first-icon.inline.svg"
import SecondIcon from "../svgs/second-icon.inline.svg"
import ThirdIcon from "../svgs/third-icon.inline.svg"

const MyComponent = () => {
  const sections = [
    { heading: "First Section", icon: () => <FirstIcon /> },
    { heading: "Second Section", icon: () => <SecondIcon /> },
    { heading: "Third Section", icon: () => <ThirdIcon /> },
  ]

  return (
    <>
      {sections.map((item, index) => {
        const Icon = item.icon
        return (
          <section key={index}>
            <Icon />
            <h2>{item.heading}</h2>
          </section>
        )
      })}
    </>
  )
}

export default MyComponent

由于我的是一个Gatsby项目，所以我使用了上述插件，但是它本身使用svg-react-loader处理svgs，因此基本原理应该可以在使用此软件包的任何React项目中使用。

动态呈现的标记始终为小写

4 个答案: