Reactjs 当我记录mixedCategory为firstName[object object]lastName时，如何在字符串中插入图标

您需要返回一个jsx值，如下所示，以便使用包装

让mixedCategory=(
{firstCategory}{icon}{lastCategory}
);

代码

import React，{Component}来自“React”；
从“react dom”导入react dom；
常量图标=（）=>{
返回(
很抱歉，您的浏览器不支持内嵌SVG。
);
};
类应用程序扩展组件{
状态={icon:，mixedValue:null}；
loadAllCategories=（）=>{
const{icon}=this.state；
让firstCategory=“电子设备”；
让lastCategory=“电话”；
让mixedCategory=(
{firstCategory}{icon}{lastCategory}
);
这是我的国家({
mixedValue:mixedCategory
});
};
render（）{
返回(
点击这里
{this.state.mixedValue&&this.state.mixedValue}
);
}
}
const rootElement=document.getElementById（“根”）；
ReactDOM.render(

@更新

如使用FontAwesomIcon的注释中所述

import React, { Component } from "react";
import ReactDOM from "react-dom";

const Icon = () => {
  return (
    <svg height="100" width="100">
      <circle
        cx="50"
        cy="50"
        r="40"
        stroke="black"
        stroke-width="3"
        fill="red"
      />
      Sorry, your browser does not support inline SVG.
    </svg>
  );
};

class App extends Component {
  state = { icon: <Icon />, mixedValue: null };

  loadAllCategories = () => {
    const { icon } = this.state;
    let firstCategory = "Electronic Devices";
    let lastCategory = "Phone";
    let mixedCategory = (
      <>
        {firstCategory} {icon} {lastCategory}
      </>
    );
    this.setState({
      mixedValue: mixedCategory
    });
  };

  render() {
    return (
      <>
        <button onClick={this.loadAllCategories}>Click here</button>
        {this.state.mixedValue && this.state.mixedValue}
      </>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

import React，{Component}来自“React”；
从“react dom”导入react dom；
从“@fortawesome/fontawesome svg核心”导入{library}；
从“@fortwome/free brands svg icons”导入{fab}”；
从“@fortawesome/free solid svg icons”导入{faInfo，faCoffee}”；
从“@fortawesome/react fontawesome”导入{FontAwesomeIcon}”；
库。添加（fab、faInfo、FACOFEE）；
类应用程序扩展组件{
状态={icon:，mixedValue:null}；
loadAllCategories=（）=>{
const{icon}=this.state；
让firstCategory=“电子设备”；
让lastCategory=“电话”；
让mixedCategory=(
{firstCategory}{icon}{lastCategory}
);
这是我的国家({
mixedValue:mixedCategory
});
};
render（）{
返回(
点击这里
{this.state.mixedValue&&this.state.mixedValue}
);
}
}
const rootElement=document.getElementById（“根”）；
ReactDOM.render（
谢谢您的建议，但我需要知道如何将字体awesome图标更改为您的图标功能，因此您使用的不是自定义功能，而是Fontawasomicon？如果是这样，请告诉我您是否正在检查Fontawasomicon，以便我能够帮助您并更新答案添加了使用Fontawasomeicon的新代码，请向上投票并访问如果问题已经回答，请点击。另外，请在问题中提及，以便对未来的用户有所帮助。快乐编码：）
let mixedCategory = (
  <>
    {firstCategory} {icon} {lastCategory}
  </>
);

import React, { Component } from "react";
import ReactDOM from "react-dom";

const Icon = () => {
  return (
    <svg height="100" width="100">
      <circle
        cx="50"
        cy="50"
        r="40"
        stroke="black"
        stroke-width="3"
        fill="red"
      />
      Sorry, your browser does not support inline SVG.
    </svg>
  );
};

class App extends Component {
  state = { icon: <Icon />, mixedValue: null };

  loadAllCategories = () => {
    const { icon } = this.state;
    let firstCategory = "Electronic Devices";
    let lastCategory = "Phone";
    let mixedCategory = (
      <>
        {firstCategory} {icon} {lastCategory}
      </>
    );
    this.setState({
      mixedValue: mixedCategory
    });
  };

  render() {
    return (
      <>
        <button onClick={this.loadAllCategories}>Click here</button>
        {this.state.mixedValue && this.state.mixedValue}
      </>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { library } from "@fortawesome/fontawesome-svg-core";
import { fab } from "@fortawesome/free-brands-svg-icons";
import { faInfo, faCoffee } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

library.add(fab, faInfo, faCoffee);

class App extends Component {
  state = { icon: <FontAwesomeIcon icon="info" />, mixedValue: null };

  loadAllCategories = () => {
    const { icon } = this.state;
    let firstCategory = "Electronic Devices";
    let lastCategory = "Phone";
    let mixedCategory = (
      <>
        {firstCategory} {icon} {lastCategory}
      </>
    );
    this.setState({
      mixedValue: mixedCategory
    });
  };

  render() {
    return (
      <>
        <button onClick={this.loadAllCategories}>Click here</button>
        {this.state.mixedValue && this.state.mixedValue}
      </>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);