如何在JSX中正确使用javascript？

Question

我试图从一个数组在我的阵营组件列表西元：

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> 

在阵营文档资料请参阅Embedding Expressions in JSX。

---

您的旧代码实际上包含语法错误。之所以出现vid未定义的错误，是因为ESLint会对您的代码进行预处理并静态分析错误，如未定义的变量 Babel将您的JSX转换为JavaScript并看到语法错误。