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

Question

我得到的输出是带有 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'。

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

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