以递归方式反应渲染组件
我下面有JSON，
{
"accountHierarchy": [
{
"account": {
"accountId": "2-AIOFRVT",
"accountName": "TEST BUSINESS TEST ACCOUNT",
"accountNumber": "ZE2004-49874",
"organisation": null,
"tradingName": null,
"masterAccount": null,
"parentAccount": null,
"primaryContact": null,
"systemId": null,
"isRelated": null,
"type": "Owner",
"location": "OWNER (ZE2004-49874)"
},
"childAccounts": [
{
"account": {
"accountId": "2-AWYZLCL",
"accountName": "TEST BUSINESS TEST ACCOUNT",
"accountNumber": "ZE2008-04508",
"organisation": "",
"tradingName": "",
"masterAccount": "2-AIOFRVT",
"parentAccount": "2-AIOFRVT",
"primaryContact": "No Match Row Id",
"systemId": null,
"isRelated": null,
"type": "Service",
"location": "5 STERKBOS STREET (ZE2008-04508)"
},
"childAccounts": [
{
"account": {
"accountId": "2-TEST123",
"accountName": "This is test account",
"accountNumber": "ZE1111-12345",
"organisation": "",
"tradingName": "",
"masterAccount": "2-AIOFRVT",
"parentAccount": "2-AIOFRVT",
"primaryContact": "No Match Row Id",
"systemId": null,
"isRelated": null,
"type": "Service",
"location": "New test account (ZE1111-12345)"
},
"childAccounts": []
}
]
},
{
"account": {
"accountId": "2-AVDAQSV",
"accountName": "TEST BUSINESS TEST ACCOUNT",
"accountNumber": "ZE2007-03590",
"organisation": "",
"tradingName": "",
"masterAccount": "2-AIOFRVT",
"parentAccount": "2-AIOFRVT",
"primaryContact": "No Match Row Id",
"systemId": null,
"isRelated": null,
"type": "Service",
"location": "160 AMCOR ROAD (ZE2007-03590)"
},
"childAccounts": null
},
{
"account": {
"accountId": "2-AX3QDZK",
"accountName": "TEST BUSINESS TEST ACCOUNT",
"accountNumber": "ZE2008-04558",
"organisation": "",
"tradingName": "",
"masterAccount": "2-AIOFRVT",
"parentAccount": "2-AIOFRVT",
"primaryContact": "No Match Row Id",
"systemId": null,
"isRelated": null,
"type": "Service",
"location": "LONE HILL (ZE2008-04558)"
},
"childAccounts": null
},
{
"account": {
"accountId": "1-4AM7S51",
"accountName": "TEST BUSINESS TEST ACCOUNT",
"accountNumber": "ZE1410-09777",
"organisation": "",
"tradingName": "",
"masterAccount": "2-AIOFRVT",
"parentAccount": "2-AIOFRVT",
"primaryContact": "2-9I4HPB8",
"systemId": null,
"isRelated": null,
"type": "Owner",
"location": "OWNER (ZE1410-09777)"
},
"childAccounts": [
{
"account": {
"accountId": "2-TEST456",
"accountName": "This is test account",
"accountNumber": "ZE1111-6789",
"organisation": "",
"tradingName": "",
"masterAccount": "2-AIOFRVT",
"parentAccount": "2-AIOFRVT",
"primaryContact": "No Match Row Id",
"systemId": null,
"isRelated": null,
"type": "Service",
"location": "Testing (ZE1111-6789)"
},
"childAccounts": []
}
]
}
]
}
]
},
"successful": false,
"code": 0
我想以反应和递归的方式解析它。示例屏幕截图如下， 任何人都可以帮助我，因为孩子里面可能有孩子，我怎么能以递归的方式编写代码。 我已经以迭代方式编写了代码，但不适用于在子对象内部具有多个子对象的JSON
我尝试了如下代码，
- 我创建了SelectLocation.jsx，代码如下，
class SelectLocation扩展了组件{
constructor(props) {
super(props)
this.state = {
selectlocationlist: {
"accountHierarchy": [
{
"account": {
"accountId": "2-AIOFRVT",
"accountName": "TEST BUSINESS TEST ACCOUNT",
"accountNumber": "ZE2004-49874",
"organisation": null,
"tradingName": null,
"masterAccount": null,
"parentAccount": null,
"primaryContact": null,
"systemId": null,
"isRelated": null,
"type": "Owner",
"location": "OWNER (ZE2004-49874)"
},
"childAccounts": [
{
"account": {
"accountId": "2-AWYZLCL",
"accountName": "TEST BUSINESS TEST ACCOUNT",
"accountNumber": "ZE2008-04508",
"organisation": "",
"tradingName": "",
"masterAccount": "2-AIOFRVT",
"parentAccount": "2-AIOFRVT",
"primaryContact": "No Match Row Id",
"systemId": null,
"isRelated": null,
"type": "Service",
"location": "5 STERKBOS STREET (ZE2008-04508)"
},
"childAccounts": [
{
"account": {
"accountId": "2-TEST123",
"accountName": "This is test account",
"accountNumber": "ZE1111-12345",
"organisation": "",
"tradingName": "",
"masterAccount": "2-AIOFRVT",
"parentAccount": "2-AIOFRVT",
"primaryContact": "No Match Row Id",
"systemId": null,
"isRelated": null,
"type": "Service",
"location": "New test account (ZE1111-12345)"
},
"childAccounts": []
}
]
},
{
"account": {
"accountId": "2-AVDAQSV",
"accountName": "TEST BUSINESS TEST ACCOUNT",
"accountNumber": "ZE2007-03590",
"organisation": "",
"tradingName": "",
"masterAccount": "2-AIOFRVT",
"parentAccount": "2-AIOFRVT",
"primaryContact": "No Match Row Id",
"systemId": null,
"isRelated": null,
"type": "Service",
"location": "160 AMCOR ROAD (ZE2007-03590)"
},
"childAccounts": null
},
{
"account": {
"accountId": "2-AX3QDZK",
"accountName": "TEST BUSINESS TEST ACCOUNT",
"accountNumber": "ZE2008-04558",
"organisation": "",
"tradingName": "",
"masterAccount": "2-AIOFRVT",
"parentAccount": "2-AIOFRVT",
"primaryContact": "No Match Row Id",
"systemId": null,
"isRelated": null,
"type": "Service",
"location": "LONE HILL (ZE2008-04558)"
},
"childAccounts": null
},
{
"account": {
"accountId": "1-4AM7S51",
"accountName": "TEST BUSINESS TEST ACCOUNT",
"accountNumber": "ZE1410-09777",
"organisation": "",
"tradingName": "",
"masterAccount": "2-AIOFRVT",
"parentAccount": "2-AIOFRVT",
"primaryContact": "2-9I4HPB8",
"systemId": null,
"isRelated": null,
"type": "Owner",
"location": "OWNER (ZE1410-09777)"
},
"childAccounts": [
{
"account": {
"accountId": "2-TEST456",
"accountName": "This is test account",
"accountNumber": "ZE1111-6789",
"organisation": "",
"tradingName": "",
"masterAccount": "2-AIOFRVT",
"parentAccount": "2-AIOFRVT",
"primaryContact": "No Match Row Id",
"systemId": null,
"isRelated": null,
"type": "Service",
"location": "Testing (ZE1111-6789)"
},
"childAccounts": []
}
]
}
]
}
]
},
"successful": false,
"code": 0,
"successful": false,
"code": 0
}
}
render() {
return (
<React.Fragment>
{
this.state.selectlocationlist && this.state.selectlocationlist.accountHierarchy && this.state.selectlocationlist.accountHierarchy.map((accountIterate) => (
<React.Fragment>
<SelectLocationItem key = {accountIterate.account.accountId} value={accountIterate} callfrom="PARENT" inputlist = {this.state.selectlocationlist} />
</React.Fragment>
))
}
</React.Fragment>
)
}
}
导出默认的SelectLocation;
2。我已将SelectLocationItem编写如下， 类SelectLocationItem扩展了组件{
constructor(props) {
super(props)
this.state = {
togglechild : false
}
}
svghandler = (inputlist, inputvalue,checkboxvalue) => {
this.setState({
togglechild : !checkboxvalue
})
}
render() {
return (
<React.Fragment>
{/* { */}
{/* this.props.callfrom == "PARENT" ? */}
<div className="TC">
{this.props.value.childAccounts != undefined && <svg onClick={(e) => this.svghandler(this.props.inputlist, this.props.value.account.accountId,this.state.togglechild)} focusable="false" aria-hidden="true" className="icon toggle-sign"> <use xlink="http://www.w3.org/1999/xlink" href={this.state.togglechild ? "#icon-add-or-minus" : "#icon-add-or-plus"}></use></svg>}
<label className="check-TC" onClick={() => this.svghandler(this.props.inputlist, this.props.value.account.accountId)} >
<input type="checkbox" />
<svg focusable="false" aria-hidden="true" className="icon top-svg"><use xlink="http://www.w3.org/1999/xlink" href="#icon-tick"></use></svg>
</label>
<label className="TC-URL">{this.props.value.account.accountName}</label>
<label className="TC-URL">{this.props.value.account.location}</label>
{ this.state.togglechild &&
<div className="childitem">
{
this.props.value.childAccounts && this.props.value.childAccounts.map((accountIterate) => (
<SelectLocationItemChild key="123" value={accountIterate} callfrom="CHILD" />
))
}
</div>
}
</div>
</React.Fragment>
)
}
}
导出默认的SelectLocationItem;
3。我写了SelectLocationItemChild，
Class SelectLocationItemChild扩展了组件{
constructor(props) {
super(props)
this.state = {
}
}
svghandler = (inputlist, inputvalue,checkboxvalue) => {
alert('Welcome to SVG handler :'+inputvalue);
}
render() {
return (
<React.Fragment>
<div className="TC">
<svg onClick={() => this.svghandler(this.props.inputlist, this.props.value.account.accountId)} focusable="false" aria-hidden="true" className="icon toggle-sign"> <use xlink="http://www.w3.org/1999/xlink" href={this.props.value.childAccounts != undefined ? "#icon-add-or-plus" : ""}></use></svg>
<label className="check-TC" onClick={() => this.svghandler(this.props.inputlist, this.props.value.account.accountId)} >
<input type="checkbox" />
<svg focusable="false" aria-hidden="true" className="icon top-svg"><use xlink="http://www.w3.org/1999/xlink" href="#icon-tick"></use></svg>
</label>
<label className="TC-URL">{this.props.value.account.accountName}</label>
<label className="TC-URL">{this.props.value.account.location}</label>
<div className="childitem">
{
this.props.value.childAccounts && this.props.value.childAccounts.map((accountIterate) => (
<SelectLocationItem key="123" value={accountIterate} callfrom="CHILD" />
))
}
</div>
</div>
</React.Fragment>
)
}
}
导出默认的SelectLocationItemChild;
所以它正在渲染，我正在发布图像供参考
1 个答案:
答案 0 :(得分：0)
类似的事情应该起作用。我把它保持得很简单。
const AccountHierarchy = () => {
return (
<ul>
{data.accountHierarchy.map(account =>
<li key={account.account.accountId}><Account account={account} /></li>
)}
</ul>
)
}
const Account = ({ account }) => {
return (
<Fragment>
{account.account.accountName}
<ul>
{account.childAccounts && account.childAccounts.map(account =>
<li key={account.account.accountId}><Account account={account} /></li>
)}
</ul>
</Fragment>
)
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？