Javascript 如何在React中获取div元素而不访问DOM?

Javascript 如何在React中获取div元素而不访问DOM?,javascript,dom,reactjs,Javascript,Dom,Reactjs,在我的react应用程序中,我试图使用document.getElementByID(“id_of_div”)获取元素,以使用innerHTML写入UI,如下面的代码所示。我使用react并直接与DOM交互,这不是react的工作方式。请建议我如何更改此方法并将数据作为对象存储到react中的UI。 提前谢谢 var uname = this.state.appuser; axios.get(url).then(function(response) { var d

在我的react应用程序中,我试图使用document.getElementByID(“id_of_div”)获取元素,以使用innerHTML写入UI,如下面的代码所示。我使用react并直接与DOM交互,这不是react的工作方式。请建议我如何更改此方法并将数据作为对象存储到react中的UI。 提前谢谢

    var uname = this.state.appuser;
    axios.get(url).then(function(response) {
        var display_city = response.data.data.request[0].query;
        var Date1 = response.data.data.weather[0].date;
        var windSpeed = response.data.data.current_condition[0].windspeedKmph;
        var maxTempC = response.data.data.weather[0].maxtempC;
        var minTempC = response.data.data.weather[0].mintempC;
        var humidity = response.data.data.current_condition[0].humidity;
        var visibility1 = response.data.data.current_condition[0].visibility;
        var myobj = {
            welcome_user: uname,
            disp_city: display_city,
            date: Date1,
            wind_speed: windSpeed,
            maxtempC: maxTempC,
            mintempC: minTempC,
            humid: humidity,
            visibility: visibility1
        }
        console.log(myobj);
        document.getElementById("welcome").innerHTML = "Welcome " + myobj.welcome_user;
        document.getElementById("cityHolder").innerHTML = myobj.disp_city;
        document.getElementById("date").innerHTML = myobj.date;
        document.getElementById("windspeed").innerHTML = myobj.wind_speed + " kmph";
        document.getElementById("maxtemp").innerHTML = myobj.maxtempC + "  C";
        document.getElementById("mintemp").innerHTML = myobj.mintempC + "  C";
        document.getElementById("humidity").innerHTML = myobj.humid + " %";
        document.getElementById("visibility").innerHTML = myobj.visibility + "%";

    }).catch(function(error) {
        console.log(error);
    });

},
我不想访问document.getElementById(“divid”)在另一个组件中定义的内部元素
将数据从myobj对象推送到UI的react方法是什么?

我刚刚开始学习react,但我认为通过阅读文档,您可以使用以下方法

// tutorial1.js
var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        Hello, world! I am a CommentBox.
      </div>
    );
  }
});
ReactDOM.render(
  <CommentBox />,
  document.getElementById('content')
);
//tutorial1.js
var CommentBox=React.createClass({
render:function(){
返回(
你好,世界!我是一个评论箱。
);
}
});
ReactDOM.render(
,
document.getElementById('content')
);

我刚刚开始学习react,但我认为通过阅读文档,您可以使用以下内容

// tutorial1.js
var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        Hello, world! I am a CommentBox.
      </div>
    );
  }
});
ReactDOM.render(
  <CommentBox />,
  document.getElementById('content')
);
//tutorial1.js
var CommentBox=React.createClass({
render:function(){
返回(
你好,世界!我是一个评论箱。
);
}
});
ReactDOM.render(
,
document.getElementById('content')
);

我想你可以用react中的REF来表示这一点。首先,您必须创建一个ref

创建引用

constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }

我想你可以在react中使用refs。首先,您必须创建一个ref

创建引用

constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }