Question

我试图在我的React组件中列出数组中的视频：

class ListVids extends Component {
  constructor(props) {
    super(props);
    let vid = '' ;
  }

  render() {
    if(this.state.vids.length === 0){
      return <p></p>
    } else {
    return (
      <div>
       <ul>
       this.state.vids.map(function (vid) {
         <li key={vid.id.toString()}>{vid.id}</li>
       }
       )
       </ul>
      </div>
     );
    }
  }
}

但是我得到了错误：'vid' is not defined no-undef.任何帮助都会非常感激。

Answer 1

JSX中的任何JavaScript表达式都必须包含在{ … }中，以表示内联JSX表达式。由于Array#map是一个返回JSX元素数组的表达式，因此必须将其包装在{ … }中：

<div>
  <ul>
    {
      this.state.vids.map(function(vid) {
        <li key={vid.id.toString()}>{vid.id}</li>
      })
    }
  </ul>
</div>

请参阅React文档中的Embedding Expressions in JSX。

您的旧代码实际上包含语法错误。您收到错误vid未定义的原因是因为ESLint预处理并静态分析您的代码中的错误，例如之前未定义的变量 Babel将您的JSX转换为JavaScript并查看语法错误。

如何在JSX中正确使用javascript？

1 个答案: