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