列表中的每个 child 都应该有一个唯一的 "key" 属性。在反应

Question

我有一个 Child 组件，如下所示

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

我在 Parent 组件中调用它，如下所示

<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)

Answer 1

作为数组传递的每个 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>

列表中的每个 child 都应该有一个唯一的 "key" 属性。在反应

Each child in a list should have a unique "key" prop. in react

key

reactjs

react-component