带有反应组件的地图

Question

我有下一个代码：

 const compsMap = new Map([
    ['id',          <TableHeaderColumn dataField={'id'} width='50' isKey autoValue={true} dataAlign='left' dataSort >{'id'}</TableHeaderColumn>],
    ['firstName',   <TableHeaderColumn dataField={'firstName'} dataSort headerAlign='left' editable={JSON.parse('{"type": "textarea" }')}>{'First Name'}</TableHeaderColumn>],
    ['lastName',    <TableHeaderColumn dataField={'lastName'} dataSort headerAlign='left'  editable={JSON.parse('{"type": "textarea" }')}>{'Last Name'}</TableHeaderColumn>],
    ['mobile',      <TableHeaderColumn dataField={'mobile'} dataSort headerAlign='left'    editable={JSON.parse('{"type": "textarea" }')}>{'Mobile'}</TableHeaderColumn>],
    ['username',    <TableHeaderColumn dataField={'username'} dataSort headerAlign='left'  editable={JSON.parse('{"type": "textarea" }')}>{'Username'}</TableHeaderColumn>],
    ['password',    <TableHeaderColumn dataField={'password'} dataSort headerAlign='left'  editable={JSON.parse('{"type": "textarea" }')}>{'Password'}</TableHeaderColumn>],
]); 

console.log('compsMap[id] = ' + compsMap['id']);

为什么我得到 compsMap['id'] 未定义？

请假设每个

<TableHeaderColumn... > ... </TableHeaderColumn>

定义明确

Answer 1

您的问题在于您尝试获取数据的方式。考虑以下示例

let map = new Map([
  ['id', 'foobar']
]);

console.log(map['id']) //undefined

对比

let map = new Map([
  ['id', 'foobar']
]);

console.log(map.get('id')) // 'foobar'

希望这对您有所帮助。

Answer 2

使用compsMap.get(key)获取值。

检查这个例子：

const compsMap = new Map([
    ['id', "<TableHeaderColumn dataField={'id'} width='50' isKey autoValue={true} dataAlign='left' dataSort >{'id'}</TableHeaderColumn>"],
    ['firstName', "<TableHeaderColumn dataField={'firstName'} dataSort headerAlign='left' editable={JSON.parse('{type: 'textarea' }')}>{'First Name'}</TableHeaderColumn>"],
    ['lastName', "<TableHeaderColumn dataField={'lastName'} dataSort headerAlign='left'  editable={JSON.parse('{'type': 'textarea' }')}>{'Last Name'}</TableHeaderColumn>"],
    ['mobile',  "<TableHeaderColumn dataField={'mobile'} dataSort headerAlign='left'    editable={JSON.parse('{'type': 'textarea' }')}>{'Mobile'}</TableHeaderColumn>"],
    ['username', "<TableHeaderColumn dataField={'username'} dataSort headerAlign='left'  editable={JSON.parse('{'type': 'textarea' }')}>{'Username'}</TableHeaderColumn>"]
]); 

console.log('compsMap[id] = ', compsMap.get('id'));

带有反应组件的地图

maps with react components

dictionary

jsx

ecmascript-6

reactjs