Javascript 在零部件名称中包含动态道具值

我正在尝试渲染react组件。组件的第一部分将保持不变，但是第二部分需要根据从props返回的数据进行动态更改。有没有办法把这些连接在一起

import * as Icon from 'react-cryptocoins';

class ResultRow extends PureComponent {
  render() {
    return (
      <div className="component-result-row">

        <Icon.{this.props.name}/>
      </div>
    );}}

import*作为“react cryptocoins”的图标；
类ResultRow扩展了PureComponent{
render（）{
返回(
);}}

硬编码名称的工作原理与预期相同

<{Icon.image1}/>

解决方案：

import * as Icon from 'react-cryptocoins';

class ResultRow extends PureComponent {
  var name = this.props.name;
  var Component = Icon[symbol];
  render() {
    return (
      <div className="component-result-row">

       <Component/>
  </div>
);}}

import*作为“react cryptocoins”的图标；
类ResultRow扩展了PureComponent{
var name=this.props.name；
变量组件=图标[符号]；
render（）{
返回(
);}}

一种可能的方法是将值存储在变量中（应以大写字母开头），然后呈现该值

像这样：

class ResultRow extends PureComponent {
  render() {

    const Comp = Icon[this.props.name];

    return (
      <div className="component-result-row">
        <Comp />
      </div>
    );
}}

class ResultRow扩展了PureComponent{
render（）{
const Comp=Icon[this.props.name]；
返回(
);
}}

您的行

有不匹配的括号。请尝试此操作，仅考虑它是一个对象{Icon[this.props.name]}将其作为对象引用不起作用。它没有返回正确的输出。请检查此项，谢谢。我可以通过创建一个变量，然后使用变量从对象访问正确的元素来解决此问题。