渲染动态创建的 React 组件

Question

我正在尝试将几个 SVG 图标动态渲染为 React 组件，下面是Icon文件示例。module.exports = {    AR: React.createClass({        render: function() {            return (                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="11" viewBox="0 0 20 11">                </svg>            );        }    }),    AU: React.createClass({        render: function() {            return (                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="11" viewBox="0 0 20 11">                </svg>            );        }    }),    ----few other components}然后需要这个文件，var Icons = require('./Icons');然后尝试像这样根据 prop 值动态渲染组件，但它没有按预期渲染组件。<i className="footer-img">{() => Icons[this.props.country.code]}</i>

Answer 1

你不需要箭头基金和React.createClass

<i className="footer-img">{Icons[this.props.country.code]}</i>

 module.exports = {

    AR: <svg xmlns="http://www.w3.org/2000/svg" width="20" height="11" viewBox="0 0 20 11"></svg>,

    AU: <svg xmlns="http://www.w3.org/2000/svg" width="20" height="11" viewBox="0 0 20 11"></svg>,

    ----few other components

}

Answer 2

您可以将 svg 组件直接保存在您的图标对象键上，并像使用普通组件一样使用它，试试这个：

module.exports = {

  AR: () => (

    <svg

      xmlns="http://www.w3.org/2000/svg"

      width="20"

      height="11"

      viewBox="0 0 20 11"

    ></svg>

  ),

  AU: () =>(

    <svg

      xmlns="http://www.w3.org/2000/svg"

      width="20"

      height="11"

      viewBox="0 0 20 11"

    ></svg>

  )

};

然后要求它并使用它：

var Icons = require('./Icons');

const YourApp = ({ country }) => {

      const IconComponent = Icons[country.code];

      return (

        <i className="footer-img">

          {<IconComponent />}

        </i>

      );

    };