reactjs - 在 html id 中使用道具
问题描述
使用道具作为HTML
id
我正在使用React
和创建一个库存表MongoDB
。StockSheetContainer.js [ Wraps, Bonnets ] 的 Item.js 在 ItemContainer.js [6", 10", Preemie] 中有子项,并且通过gender.js (尚未完成) [boys, girl,中性的]。我想 。我尝试了道具但失败了。
file: Item.js
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import ItemContainer from './ItemContainer';
export default class Item extends React.Component {
render() {
let var_id = this.props.title.value + this.props.name.value;
console.log(var_id); // it supply NaN
return (
<div id="" style={{display: "flex"}}>
<p>
{this.props.name}
<input id='var_id' type="number" />
{/* id={this.props.title + this.props.item}
<input id= 'var_id' type="number" />
<input id= 'var_id' type="number" />
</p>
</div>
) } }
file: ItemContainer.js
import React from 'react';
import Item from './Item';
import PropTypes from 'prop-types';
export default class ItemContainer extends React.Component {
render() {
if (this.props.title === 'Wraps') {
return (
<div>
<h3>{this.props.title}</h3>
<Item title='' name="6 inch" />
<Item title='' name="8 inch"/>
<Item title='' name="10 inch"/>
<Item title='' name="12 inch"/>
<Item title='' name="Cocoon"/>
</div>
)}
else {
return (
<div>
<h3>{this.props.title}</h3>
<Item title='' name="Tiny"/>
<Item title='' name="Preemie"/>
<Item title='' name="Micro"/>
<Item title='' name="New Born"/>
</div>
) } } }
file: StockSheetContainer.js
import React from 'react';
import ItemContainer from './ItemContainer';
class StockSheetContainer extends React.Component{
render(){
return(
<div>
<NavBar user="Diane"/>
<DonationInfo referenceNumber= "NC12" dateDonated= "June 4, 2019"
seamstress="Jacky Mao" donor="John Doe"/>
<ItemContainer title="Wraps"/>
<ItemContainer title="Bonnets"/>
<ItemContainer title="Blankets"/>
<ItemContainer title="Dresses"/>
<button className="btn btn-success">Submit</button>
</div>
) } }
export default StockSheetContainer;
我要在哪里var_id = let var_id = this.props.title.value + this.props.name.value;
解决方案
推荐阅读
- python-3.x - 使用代理服务器时麻线上传失败
- python - 从具有相似键值的字典列表中提取信息
- html - 我下载了我的 chrome 书签以移动到新计算机,并将其保存为 XML 而不是 HTML - 当我尝试转换时出现错误
- c# - UWP 拖放格式化文本
- scala - 范围内过滤方法的实际返回类型是什么?如何使它成为矢量?
- python - 如何在迭代时修改 pandas DataFrame 的特定单元格?
- go - 使用 go-client 在 Istio-resource 上设置 ObjectMeta
- python - 对列表的排列使用递归
- java - servlet类与jsp.file之间传递属性时如何解决空指针异常
- java - Android 共享意图不适用于 reddit