document.getElementById（）。innerHTML无法在ReactJS中获取文本

Question

I rendered the date via a function called renderToday() . The reason I want to get the date, is so I can go left, or right from that date. And I need to change the date accordingly.

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

I tried using document.getElementById('date') , and I set the div with an id of "date", and I used .innerHTML . Now everything below AccountsUIWrapper, doesn't show up now.

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

It happens because you are trying get element from DOM in time when DOM is not ready, you can just call renderToday() in 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

you can call DOM operations in componentDidMount handler, read more about component lifecycle - it is possible but not recommended

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