document.getElementById（）。innerHTML無法在ReactJS中獲取文本

Question

我通過一個名為renderToday()的函數渲染了日期。 我想獲取日期的原因是，我可以從該日期左移或右移。 我需要相應地更改日期。

renderToday: function() {
    var today = new Date();
    return today.toDateString();
  },

我嘗試使用document.getElementById('date') ，並將div的ID設置為“ date”，然后使用.innerHTML 。 現在，AccountsUIWrapper下的所有內容現在都不會顯示。

renderMoods() {
    // Get tasks from this.data.moods
    var d = document.getElementById("date");
    return (<div>{d.innerHTML}</div>);
},

render: function() {
    return (
      <div className="container">
        <h1>How are You?</h1>
        <AccountsUIWrapper />

        { this.data.currentUser ?
        <div>
        <form className="your_mood" onSubmit={this.handleSubmit} >
          <select ref="mood">
            <option value="0" disabled selected>Select your Mood</option>
            <option value=":)">:)</option>
            <option value=":|">:|</option> 
            <option value=":(">:(</option>
          </select>
          <button type="submit">submit</button>

        </form> 

        <div id="date">
          {this.renderToday()}
        </div>
        <div>
          {this.renderMoods()}
        </div>
        </div>
        : '' 
      }

      </div>
    );
  }
 });

Answer 1

發生這種情況是因為您試圖在DOM尚未准備就緒時及時從DOM中獲取元素，您可以只在renderMoods()調用renderToday() renderMoods()

var Component = React.createClass({
    renderToday() {
        return Date.now();
    },

    renderMoods() {
        return <h2>
            { this.renderToday() }
        </h2>;
    },

    render() {
        return <div>
            <h1>Component</h1>
            <div>{ this.renderToday() }</div>
            <div>{ this.renderMoods() }</div>
        </div>;
    }
});

Example

您可以在componentDidMount處理程序中調用DOM操作，了解有關component lifecycle更多信息- 可能但不建議

var Component = React.createClass({
    renderToday() {
        return Date.now();
    },

    componentDidMount() {
        document.getElementById('mood').innerHTML = document.getElementById('date').innerHTML
    },

    render() {
        return <div>
            <h1>Component</h1>
            <div id="date">{ this.renderToday() }</div>
            <div id="mood"></div>
        </div>;
    }
});

Example