Question

在我的反应应用程序中，我正在尝试使用document.getElementByID（＆＃34; id_of_div＆＃34;）来获取元素，以使用innerHTML写入UI，如下面的代码所示。我正在使用反应并直接与DOM交互，这不是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访问另一个组件中定义的内部元素（＆＃34; divid＆＃34;）将我的数据从myobj对象推送到UI的反应方式是什么？

Answer 1

我刚刚开始学习反应，但我想通过阅读文档，你可以使用下面的内容。

// 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')
);

Documentation Here

Answer 2

我认为您可以使用 refs 对此做出反应。为此，您首先必须创建一个引用。

创建引用

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

然后您可以轻松访问您的 div 元素并使用...更改任何内容

 const node = this.myRef.current;
 node.innerHTML = "Enter text you want"

如何获取div元素而不访问React中的DOM？

2 个答案: