2016-08-16 13 views
0

私のリアクションアプリケーションでは、document.getElementByID( "id_of_div")を使用して要素をフェッチして、下のコードに示すようにinnerHTMLを使用してUIに書き込もうとしています。私はリアクションを使ってDOMと直接やり取りしていますが、これはリアクションのやり方ではありません。このアプローチをどのように変更し、反応としてUIにオブジェクトとして保存したデータを書き込むことができるかをお勧めします。 ありがとうございました。 UIにこのmyobjオブジェクトから自分のデータをプッシュする反応の方法は何ですかReactでDOMにアクセスせずにdiv要素を取得する方法は?

私はのdocument.getElementById(「divIdは」)によって別のコンポーネントで定義された内側の要素にアクセスする必要はありません
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); 
    }); 

}, 

答えて

0

私はちょうど反応を学び始めたばかりですが、私はあなたが以下で使用できるドキュメントを読んでいると思います。

// 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

関連する問題