代码之家 › 专栏 › 技术社区 › PleaseNoBugs

React在组件名称中包含动态属性值

components reactjs javascript

PleaseNoBugs · 技术社区 · 7 年前

我正在尝试渲染react组件。组件的第一部分将保持不变,但是第二部分需要根据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>
);}}

1 回复 | 直到 7 年前

Mayank Shukla 7 年前

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

这样地:

class ResultRow extends PureComponent {
  render() {

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

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

推荐文章

code4cash · 声明了“string”,但从未读取其值

3 年前

Srinath Macherla · 如何删除ant design甜甜圈图表中的图例

3 年前

Federico Gentile · 如何在数组中无限循环并以角度显示值?

3 年前

Ren Jitsm · React useeffect显示组件安装2次

3 年前

Aden Lee · 如何在React中使用filter()控制JSX组件?

3 年前

Maria · 如何将DatePicker(@mui)值提升到父组件?

3 年前

Audiosleef · 根据搜索结果显示列表

7 年前

SamohtVII · 使用组件区域显示各种内容

7 年前

yhc44 · Vue。js组件父事件

7 年前

Chris · 在Vue中动态添加不同组件

7 年前