我正在React中渲染一个名为attributemodal
的模式。
attributemodal
的呈现方法如下:
public render() {
const name = this.props.activeTag.name;
function findindex(element: any) {
return element.name == name;
}
const index = this.props.possibleTags.findIndex(findindex);
let attributes = [{name: "", helptexts: [{helptext: ""}] }];
let infoText;
if (index != -1) {
attributes = this.props.possibleTags[index].attributes;
infoText = this.props.possibleTags[index].helptexts[0].helptext;
}
const attr = attributes.map((item, key) =>
<div style={{border: "1px solid black", padding: "10px"}} key={`attribute${key}`}>
<b>{item.name}: </b>
<input type="text" name={item.name} className="form-control" defaultValue={this.props.activeTag.attributes.length > 0 ? this.props.activeTag.attributes[key].value : ""} data-key={key} data-id={index} onChange={this.onAttributeUpdate.bind(this)}/>
<br/>
<div className="info-box alert">
<div className="msg" style={{padding: "0px 20px 0px 10px"}}>
<i className="fa fa-info" style={{marginRight: "8px"}}></i> {item.helptexts[0].helptext}
</div>
</div>
</div>
);
return <Modal size="large" isOpen={this.props.isOpen}>
<ModalHeader>{this.props.headerText + " " + this.props.activeTag.name}</ModalHeader>
<ModalBody>
<div className="info-box alert">
<div className="msg" style={{padding: "0px 20px 0px 10px"}}>
<i className="fa fa-info" style={{marginRight: "8px"}}></i> {infoText}
</div>
</div>
{attr}
</ModalBody>
<ModalFooter>
<Button onClick={this.props.startAction.bind(this)} className="btn-danger" disabled={this.state.isRunning}>{this.state.isRunning && <i className="fa fa-spinner fa-spin"></i>} {this.props.addText}</Button>
</ModalFooter>
</Modal>;
}
如您所见,我试图在key
内的div中添加一个map
。
但这仍然给我这个错误!
它还表示我正在渲染tr
,但不是
谁能解释为什么会这样?
这是我渲染attributemodal
的地方:
这在我的主应用程序的render方法中。
<AttributeModal
key={"attributemodal"}
startAction={this.onUpdateAttribute.bind(this)}
isOpen={this.state.configTagModalActive}
headerText={t("header")}
activeTag={this.state.activeTag}
addText={t("close")}
possibleTags={this.state.possibleTags}
/>