だから私はReact.jsコンポーネントを持っていて、インポートしたオブジェクトをループしてHTMLオプションを追加したいと思っています。これが私が試したものですが、これは醜くて機能しません：
import React from 'react';
import AccountTypes from '../data/AccountType';
const AccountTypeSelect = (props) => {
return (
<select id={props.id} className = {props.classString} style={props.styleObject}>
<option value="nothingSelected" defaultValue>--Select--</option>
{
$.each(AccountTypes, function(index) {
<option val={this.id}>this.name</option>
})
}
</select>
);
};
export default AccountTypeSelect;
上記のコードからコンソールでこのエラーを受け取りました：
invariant.js？4599：38-キャッチされていない不変の違反：オブジェクトはReactの子として無効です（見つかった：キーが{id、name、enabled、additionalInfo}のオブジェクト）。子のコレクションをレンダリングする場合は、代わりに配列を使用するか、ReactアドオンのcreateFragment（object）を使用してオブジェクトをラップします。のrenderメソッドを確認してくださいAccountTypeSelect。
本当に各オブジェクトを配列に変換する必要がありますか、それともcreateFragmentでラップして使用する必要がありますか？この場合のベストプラクティスは何ですか？
$.each使用する代わりにmap：
{AccountTypes.map(function(a) {
return (
<option key={a.id} val={a.id}>{a.name}</option>
);
})}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加