從反應中的json字符串呈現HTML

Question

我想從我從API接收的JSON字符串呈現HTML對象。我能夠讓字符串成功呈現給HTML，但它顯示了整個JSON字符串。我只想找到具體的值（電話，姓名，身份證。）什麼是我從我的JSON數組中提取特定值並將其格式化爲HTML的最佳方式？我指的是按狀態記錄，但我無法在渲染過程中獲得任何記錄的子值。

class menuScreen extends React.Component { 

    constructor(props) { 
     super(props) 

     const data = store.getState(); 

     this.state = { 



      username: '', 
      messages: data.messages 
     } 
    } 

    handleSearch(e) { 
     this.setState({username: e.target.value}) 
    } 

    handleChange(evt) { 
     this.setState({ 
      username: evt.target.value.substr(0, 100) 
     }); 

    } 

    onLinkClicked() { 

     var conn = new jsforce.Connection({serverUrl: 'https://cs63.salesforce.com', accessToken: sessionStorage.getItem('token')}) 

     var parent = this.state.username 
     //console.log(this.state.username) 
     conn.sobject("Contact").find({ 
      LastName: { 
       $like: parent 
      } 
     }, 'Id, Name, Phone' 

     ).sort('-CreatedDate Name'). 
     limit(5).skip(10).execute(function(err, records) { 
      if (err) { 
       return console.error(err); 
      } 
      for (var i = 0; i < records.length; i++) { 
       var record = (records[i]); 
       console.log("Name: " + record.Name); //these are the records I'm trying to render 
       console.log("Phone: " + record.Phone); 


      } this.setState({records : records}) 


     }.bind(this)); 

    } 

    render() { 
     return (
      <div className='menubox' id='menubox'> 
       <div className='searchbar-container'> 
        <form onSubmit={e => e.preventDefault()}> 
         <input type='text' size='25' placeholder='Contact Last Name' onChange={this.handleChange.bind(this)} value={this.state.username}/> 
         <button type='submit' onClick={this.onLinkClicked.bind(this)}> 
          Search 
         </button> 
        </form> 
        </div> 
       <div> 
      <div dangerouslySetInnerHTML={ { __html: JSON.stringify(this.state.records) } }></div> //how can I show specific values, isntead of the entire string? 
     </div> 
    </div> 
     ) 
    } 
} 
export default menuScreen; 

Answer 1

您可以運行地圖功能和輸出的JSX每個項目。請注意，如果你想在map函數中使用更復雜的HTML結構，你必須將它包裝在一個DOM節點中。

完整文件看起來像：

render() { 
    return (
     <div className='menubox' id='menubox'> 
      <div className='searchbar-container'> 
       <form onSubmit={e => e.preventDefault()}> 
        <input type='text' size='25' placeholder='Contact Last Name' onChange={this.handleChange.bind(this)} value={this.state.username}/> 
        <button type='submit' onClick={this.onLinkClicked.bind(this)}> 
         Search 
        </button> 
       </form> 
      </div> 
      <div> 
       {this.state.records.map(record => (
        <div>{record.attributes.name} {record.attributes.phone}</div> 
       )} 
      </div> 
     </div> 
    ); 
} 

Answer 2

JSON.parse您的字符串轉換成JavaScript對象。然後，您可以在該對象上執行任何想要的處理，例如刪除不需要的字段，然後將其返回到您可以渲染的JSON字符串中。

喜歡的東西：

class BlahBlah extends React.Component { 
    constructor() { 
    //...some code... 
    this.processJson = this.processJson.bind(this) 
    } 
    //...a lot of code...  
    processJson(json) { 
    var object = JSON.parse(json) 
    var output = {} 
    //for every property you want 
    output[property] = object[property] 
    return JSON.stringify(output) 
    } 
    //...a lot more code... 
    render() { 
    return(
     //...even more code... 
     <div dangerouslySetInnerHTML={ { __html: this.processJson(this.state.records) } }></div> 
     //...and yet more code. 
    ) 
    } 
} 

Answer 3

你可以創建一個單獨的渲染方法，它會使您的記錄，像這樣：

renderRecords(records) { 
    return records.map(r => <div> r.Name, r.Phone</div>); 
} 

然後調用渲染方法內的方法，而不是使用危險的SetInnerHTML，像這樣

render() { 
    return (
     <div className='menubox' id='menubox'> 
      <div className='searchbar-container'> 
       <form onSubmit={e => e.preventDefault()}> 
        <input type='text' size='25' placeholder='Contact Last Name' onChange={this.handleChange.bind(this)} value={this.state.username}/> 
        <button type='submit' onClick={this.onLinkClicked.bind(this)}> 
         Search 
        </button> 
       </form> 
       </div> 
      <div> 
     <div>{ this.renderRecords() }</div> 
    </div> 
</div> 
    ) 
}