我有一个类似于下面的子组件
import React, { Component } from 'react';
class InputText extends Component {
render = () => {
return (
<div className="form-group">
<label htmlFor={this.props.id}>{this.props.label}</label>
<input type={this.props.type} value={this.props.value} placeholder={this.props.placeholder} name={this.props.name} id={this.props.id} className= {"form-control "+ this.props.class} required={this.props.extraValue}/>
</div>
)
}
}
export default InputText
我在如下的“父级”组件中称呼它
<InputText class="" placeholder="Email here..." type="email" name="email" onChange={this.handleChange} extraValue={true} label={[<span className="text-danger">*</span>, " Email"]} />
我遇到如下错误
Warning: Each child in a list should have a unique "key" prop.
Check the render method of `InputText`. It was passed a child from Register. See https://fb.me for more information.
in span (at Register.js:182)
in InputText (at Register.js:182)
答案 0 :(得分:2)
作为数组传递的每个JSX元素都必须具有唯一的ID。只需为span元素分配一些键即可。
label={[<span key={1} className="text-danger">*</span>, " Email"]}
// ^^^^ key
但是我建议您将它作为两个单独的道具传递,而不是作为数组传递。
label={'*'}
text={'Email'}
并在您的组件内部:
<label htmlFor={this.props.id}>
<span className='text-danger'>{this.props.label}</span>
{this.props.text}
</label>