分配javascript函数的返回值显示为[object Object而不是HTML？

Question

我正在尝试将一些javascript返回值附加到页面上的一个元素。

当附加到web浏览器中时，我只能看到DIV中的对象对象。

你知道我哪里错了吗？

向HTML追加函数返回值的JavaScript：

let documentTable = this.renderDocuments();
let elem = document.getElementById('TableGoesHere');
elem.innerHTML += documentTable;

渲染：

<div id="TableGoesHere"></div>

documentTable的控制台日志：

​

RenderDocuments函数：

  public renderDocuments() {

    const docs = this.state.documents.map(document => {

      return (
        <tr>
          <td className="title">{document.Cells.results[3].Value }</td>
          <td className="site">{siteName}</td>
          <td className="path">{sitePath}</td>
          <td><a href={document.Cells.results[6].Value + '?web=1&action=edit'}>View File</a></td>
        </tr> 
      )

    });

    return (

      <div id="tableID" className="table-list-container">

        <table className="table-list">

          <thead>
            <th><button type="button" className="sort" data-sort="title">Title</button></th>
            <th><button type="button" className="sort" data-sort="site">Site</button></th>
            <th><button type="button" className="sort" data-sort="path">Path</button></th>
            <th><button type="button">View File</button></th>
          </thead>

          <tbody className="list">

            {docs}

          </tbody>

        </table>

        <table className="table-footer">
          <tr>
            <td className="table-pagination">
              <ul className="pagination"></ul>
            </td>
          </tr>
        </table>

      </div>

    )

  }

Answer 1

您的函数返回一个React元素。要将React元素呈现到HTML Node中，请使用ReactDOM.render (请参阅Rendering Elements)。

在您的情况下，它将是：

const documentTableElement = this.renderDocuments();
const targetElement = document.getElementById('TableGoesHere');
ReactDOM.render(documentTableElement, targetElement);