Question

可能与ReactJs cannot access props重复，但这对我仍然没有定义。

但我仍然坚持语法如何获取 对象属性，例如：object“releasedata”s“ name ”属性如下在我的子组件中使用React中的道具的JSON响应。

请注意：不是我在堆栈中找到大量答案的数组。

JSON：

{
"id": "-559674239450219239",
"key": "TASK-1",
"name": "Hide old Releases",
"projectId": "-5010744238007635986",
"releasedata": {                  <--- //Access releasedata Object using props not an array
              "releaseId": "508054512004262880",
              "name": "prog rel1",     <--- // Get name
              "projectId": null,
              "programId": "1"
              },
"done": false,
 }

我的代码：

家长：

componentDidMount: function(){
        $.ajax({
            url: "http://localhost:8080/app/restapi/getreleasedata/"+Key+"?access_token="+accesstokenvalue+""
        }).then(function(data) {
             this.setState({data: data});
                      console.log(data);
            }.bind(this))
    },
render: function(){
    return (
            <PbiHeader releaseData={this.state.data.releasedata}  />                
    )
  }
});

子组件：

var PbiHeader = React.createClass({
  render: function(){
    return (
                  <tbody>
                    <tr>
                      <td>{this.props.releaseData.name}</td> //Here i am getting undefined and i am stuck with syntax to fetch object releaseData's name
                    </tr>
                  </tbody>
    )
  }
});

任何帮助都会很棒。

Answer 1

您可以在子组件中使用componentWillRecieveProps事件来更新其状态（componentWillRecieveProps(nextProps)）当您更新父组件中的子道具时，它会触发。

文档https://facebook.github.io/react/docs/component-specs.html

Answer 2

渲染对象属性。我在父setstate（）本身中设置了所有属性：

父组件：

componentDidMount: function(){
    return { data: [],
             release: []};          ===> Defined the undefined variable type
    },
    $.ajax({
        url: "http://localhost:8080/app/restapi/getreleasedata/"+Key+"?access_token="+accesstokenvalue+""
    }).then(function(data) {
         this.setState({data: data,
               release:data.releasedata    ===> Assign directly object from JSON to 
                                                local state variable Defined
             });
        }.bind(this))
    },
    render: function(){
    return (
        <PbiHeader pbiRelease={this.state.release.name} />   ==>Attach attribute 
                  mapping inside object properties here "name" here we can add more 
                  than one attribute eg: add release "id" "<PbiHeader pbiRelease={this.state.release.name} 
                  pbiReleaseId={this.state.release.id} .... etc />"
           )
     }
   });

子组件：

var PbiHeader = React.createClass({
render: function(){
return (
              <tbody>
                <tr>
                  <td>{this.props.pbiRelease}</td> //Here i mapped props to parent 
                                                    attribute name
                </tr>
              </tbody>
        )
     }
   });

这是我可以映射到JSON嵌套对象的属性的方法。如果还有其他方式，请加上。

Reactjs使用props从Child companent中的JSON访问Object属性

2 个答案: