错误：元素不可分配给反应中的类型字符串

Posted 2023-03-16

【中文标题】错误：元素不可分配给反应中的类型字符串

【英文标题】：Error: element is not assignable to type string in react

【发布时间】：2020-09-19 02:22:00

【问题描述】：

我得到的输出是带有 html 标签的；因此我使用了 dangerouslySetInnerHTML 来避免这种情况，之后我收到错误“Type ' contents: Element; ' is not assignable to type 'string'。”

我的反应代码如下：

import * as React from 'react';
import  RouteComponentProps  from 'react-router';

interface FetchImageDataState 
imageList: ImageData[];
loading: boolean;


export class OurTeam extends React.Component<RouteComponentProps<>, FetchImageDataState> 
constructor() 
    super();
    this.state =  imageList: [], loading: true ; //initialize to default

    fetch('api/Home/ourTeam')
        .then(response => response.json() as Promise<ImageData[]>)
        .then(data => 
            this.setState( imageList: data, loading: false );
        );





public render() 

    let contents = this.state.loading ? <p><em>Loading...</em></p> : this.renderImageTable(this.state.imageList);
    let body =  contents ;
    return <div>
        <h1>Team</h1>

        <div dangerouslySetInnerHTML= __html: body  />
            </div>;


private renderImageTable(imageList: ImageData[]) 
    return <div className='table'>
        imageList.map(x =>
            <div key=x.byteData >[x]</div>)
    </div>;




export class ImageData 
byteData: string = "";

如果不使用 dangerouslySetInnerHTML，代码的输出是带有 html 标签的所需文本；并且还显示了图像标签而不是图像。详细的错误是： [at-loader] 中的错误 ./ClientApp/components/OurTeam.tsx:41:18 TS2322：类型 ' dangerouslySetInnerHTML: __html: 内容：元素； ; ; ' 不可分配给类型 'HTMLProps'。 属性“dangerouslySetInnerHTML”的类型不兼容。 输入 ' __html: 内容：元素； ; ' 不可分配给类型 ' __html: string; |不明确的'。 输入 ' __html: 内容：元素； ; ' 不可分配给类型 ' __html: string; '。 属性“__html”的类型不兼容。 类型'内容：元素； ' 不可分配给类型 'string'。

我是新手，请帮忙解决问题。

【参考方案1】：

您似乎比它应该更复杂，下面的代码应该可以正常工作。使用三元运算符来检查 loading 是否为真并基于此呈现 html 或 JSX，并且最好在组件挂载时进行调用

import React,Fragment from 'react';   
export class OurTeam extends Component 
   constructor() 
    super();
    this.state =  imageList: [], loading: true ; //initialize to default



  componentDidMount()
    fetch('api/Home/ourTeam')
        .then(response => response.json())
        .then(data => 
            this.setState( imageList: data, loading: false );
        ).catch(err=>
         console.log(err);
         ;
  


 render() 
    return (<div>
        <h1>Team</h1>
      this.state.loading ?
        <Fragment>
         <p><em>Loading...</em></p>
        </Fragment>  
        :
       <Fragment>
        <div className='table'>
         this.state.imageList.map(x =>
             <div key=x.byteData >[x]</div>)
           </div>
      </Fragment>);

【讨论】：

嗨 Abdullah - 我将不得不使用 ImageData 类从作为 Asp.net 核心的服务器端获取数据..

似乎是什么问题，你可以像在OurTeam Class 中那样做

问题是输出带有html标签；我想要它没有标签......例如输出是 xyz 而不是 xyz

的粗体值

之前我将值作为字符串传递，我将其更改为传递 Json 参数；但不幸的是，不能作为文本值和图像的单独值传递，因为我传递的字符串/json 如下所示。此数据显示为纯文本，这是问题所在。如果您可以指导一些替代解决方案，请帮助我。 Ashok