react-bootstrap-tableのネストされたフィールドにアクセスできない

Question

Mongoデータベースはネストされたデータを持つ配列を返す可能性があります。 {アプリケーション：{データ：{説明： '私の説明}}}

しかし、それは全く機能しません。あなたはやり方について考えていますか、私は医者や医者には何も見つかりませんでした。

const Applications = (props) => (
 
    <div className="applications"> 
 
    {props.applications.length === 0 ? 
 
     <div>Aucune candidature</div> 
 
     : <BootstrapTable data={props.applications} striped={true} hover={true}> 
 
     <TableHeaderColumn dataField="_id" isKey={true} dataAlign="center" dataSort={true}>Title</TableHeaderColumn> 
 
     <TableHeaderColumn dataField="status">Candidat</TableHeaderColumn> 
 
     <TableHeaderColumn dataField="data.description" dataSort={true}>description</TableHeaderColumn> 
 
     </BootstrapTable> 
 
    } 
 
    </div> 
 
)

助けてくれてありがとう;）

Answer 1

を数分後、私は解決策を見つけた：私は、ドキュメントのこの部分に示すように、カスタムdataFormatterを使用する必要がありました： https://github.com/AllenFang/react-bootstrap-table#quick-demo

ただ、セル内のオブジェクトを渡し、その後、あなたが

を必要とするデータを抽出するためにフォーマッタを使用

だから、ここに私の最終的なコードです：

function showDescription(cell, row) { 
 
    return cell.description; 
 
} 
 

 
const Applications = (props) => (
 
    <div className="applications"> 
 
    {props.applications.length === 0 ? 
 
     <div>Aucune candidature</div> 
 
     : <BootstrapTable data={props.applications} striped={true} hover={true}> 
 
     <TableHeaderColumn dataField="_id" isKey={true} dataAlign="center" dataSort={true}>Title</TableHeaderColumn> 
 
     <TableHeaderColumn dataField="status">Candidat</TableHeaderColumn> 
 
     <TableHeaderColumn dataField="data" dataSort={true} dataFormat={showDescription}>description</TableHeaderColumn> 
 
     </BootstrapTable> 
 
    } 
 
    </div> 
 
)

Answer 2

は私がJSONでアドレスオブジェクトを取得同様のユースケースを持っていた、と私はそのアドレスをフォーマットする必要があります人間が読める形式（一般アドレス）に変換してセルに供給します。 React Bootstrap Tableには、TableHeaderColumnコンポーネントの 'dataFormat'というプロパティがあります。このコンポーネントは関数（文字列についてはわかりませんが）を受け取り、それに応じてデータをフォーマットします。 私のサンプルコードは以下の通りです。 （いくつかの構文エラーがあるかもしれませんが、私はIDEで入力していませんでした：＃、あなたがそれらを把握することができます願っています;））

render: function() { 
const addressFormatter = function (address) { 
    return !address ? null : `<div> 
        <div><br>${address.contactName}</br></div> 
        <div><br>${address.address1}</br></div> 
        <div><br>${address.address2}</br></div> 
        <div><br>${address.city}, ${address.state} ${address.zip}. USA</br></div> 
       </div>`; 
}; 

return (
    <div> 
     <BootstrapTable data={this.state.districts}> 
      <TableHeaderColumn dataField='name' isKey={true} dataAlign='center' 
           tdStyle={{whiteSpace: 'normal', verticalAlign: 'middle'}}>Name</TableHeaderColumn> 
      <TableHeaderColumn dataField='shippingAddress' dataAlign='left' 
           tdStyle={{whiteSpace: 'normal', lineHeight: '10px', verticalAlign: 'middle'}} 
           dataFormat={ addressFormatter }>Shipping Info</TableHeaderColumn> 
      <TableHeaderColumn dataField='mailingAddress' dataAlign='left' 
           tdStyle={{whiteSpace: 'normal', lineHeight: '10px', verticalAlign: 'middle'}} 
           dataFormat={ addressFormatter }>Mailing Info</TableHeaderColumn> 
     </BootstrapTable> 
    </div> 
); 

}