reactjs - REACT JS VERSION 4.0.2 map 方法无法正常工作

Question

    state = {
    size: { rows: 5, cols: 5 },
    
    bits: ['bit1', 'bit2', 'bit3', 'bit5', 'bit7'],
  };

  render() {
    return (
      <div className="badge m-3 badge-warning">
        <ul>
          {this.state.bits.map((bit) => {
            <li>{bit}</li>;
          })}
        </ul>
      </div>
    );
  }
}

这是我写的代码。我的期望是得到这样的东西

<div className="badge m-3 badge-warning">
   <ul>
     <li>bit1</li>
     <li>bit2</li>
     .
     .
     <li>bit7</bit>
</div>

但是我<li>在两者之间没有标签<ul>......这是什么错误？

标签： reactjsdictionaryecmascript-6

Answer 1

像这样试试

{this.state.bits.map((item,idx) => (
    <li key={idx}> {item}</li>
)}

或者

{this.state.bits.map((item, idx) => {
   return <li key={idx}>{item}</li>
}