Javascript 如何访问React js 0.13.3中的嵌套对象_Javascript_Jquery_Html_Reactjs

Javascript 如何访问React js 0.13.3中的嵌套对象

javascript jquery html reactjs

Javascript 如何访问React js 0.13.3中的嵌套对象,javascript,jquery,html,reactjs,Javascript,Jquery,Html,Reactjs,下面添加的代码在React js 0.10.0中运行良好。我还想在0.13.0版本中运行相同的代码。我的主要需求是访问嵌套对象作为默认对象，如下面的.state.data.query.results.channel.item.condition.temp <!doctype html> <html> <head> <title>Weather Widget</title> <link rel="stylesheet

下面添加的代码在React js 0.10.0中运行良好。我还想在0.13.0版本中运行相同的代码。我的主要需求是访问嵌套对象作为默认对象，如下面的.state.data.query.results.channel.item.condition.temp

<!doctype html>
<html>
<head>
    <title>Weather Widget</title>
    <link rel="stylesheet" href="weather.css" />
    <script src="http://fb.me/react-0.10.0.js"></script>
    <script src="http://fb.me/JSXTransformer-0.10.0.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<script type="text/jsx">
    /*** @jsx React.DOM */
    var weatherWidget = React.createClass({
        loadData: function(){
            $.ajax({
                url: 'http://query.yahooapis.com/v1/public/yql?q=select%20item%20from%20weather.forecast%20where%20location%3D%2222102%22&format=json',
                dataType : "jsonp",
                cache: false,
                success: function(data) {
                    console.log(data)
                    this.setState({data: data});
              }.bind(this)
            });
        },
        getInitialState: function(){
            return {data: []};
        },
        componentWillMount: function(){
            this.loadData();
        },
        render: function(){
            return(
                <div className="ww-container">
                    <div className="ww-current-condition">
                        <div className="ww-current-temperture">{this.state.data.query.results.channel.item.condition.temp}&deg;</div>
                    </div>
                </div>
            )
        }
    });

    React.renderComponent(<weatherWidget />, document.body);
</script>
</body>

</html>

你应该像这样设置初始状态

getInitialState: function(){
    return {
        data: {
            query: {
                results: {
                    channel: {item: {condition: {temp: 0}}}     
                }
            }
        }
    };
},

-注意-在版本0.13.3中，应使用.render方法而不是.renderComponent

或者您可以在render方法中检查数据，如果数据未定义-显示加载…，如果状态已更新，您将看到您的数据

我遇到了一个类似的问题，我无法通过常规的点符号访问嵌套对象。设置状态时，为什么需要指定对象的完整嵌套结构？

getInitialState: function(){
  return {};
},

render: function() {
  if (!this.state.data) {
       return <div>Loading...</div>;
  }
  ....
}