HTML 대신 텍스트로 버튼을 보여주는 Typescript Render

Question

간단한 hello world div를 렌더링하는 typescript 파일이 있습니다. HTML 테이블을 렌더링 할 수 있지만 Input 또는 Button을 추가하면 문자 그대로 "<button> my button </ button>"으로 렌더링됩니다.

제 경험상 가져올 패키지가 누락 된 것 같습니다. 아래에 가져 오기와 Render () 함수를 붙여 넣었습니다.

import * as watchUtils from "esri/core/watchUtils";
import Handles = require("esri/core/Handles");
import { declared, property, subclass } from "esri/core/accessorSupport/decorators";
import MapView = require("esri/views/MapView");
import Widget = require("esri/widgets/Widget");
import { renderable, tsx } from "esri/widgets/support/widget";



render() {

    if(resolvedValue != null){
        selectedHasfolder = "<table >"; 
        for(var i = 0; i < resolvedValue.length; ++i){
            selectedHasfolder += "<tr><td><button >Select Inspection(s) to proceed.</button></td><td>" + resolvedValue[i]["PropertyA"] + "</td></tr>";
        }       
                        selectedHasfolder += "</table>";    


    }   


return <div class="basemap23"  style="background-color:#FFFFFF;" innerHTML={selectedHasfolder}></div>;

Answer 1

나는 당신이 이와 같은 것을하고 사용하지 않는 것이 좋습니다 innerHTML.

function Component() {
  const selectedHasFolder = resolvedValue ? (
    <table>
      {resolvedValue.map((item, index) => (
        <tr key={index}>
          <td>item.propertyA</td>
          <td>
            <button>Select Inspection(s) to proceed.</button>
          </td>
        </tr>
      ))}
    </table>
  ) : null;

  return (
    <div class="basemap23" style="background-color:#FFFFFF;">
      {selectedHasFolder}
    </div>
  );
}