React包括组件名称中的动态prop值

Posted 2021-04-08

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

import * as Icon from 'react-cryptocoins';

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

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

硬编码名称按预期工作

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

答案

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

像这样：

class ResultRow extends PureComponent {
  render() {

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

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