Babel错误:JSX值应该是表达式或带引号的JSX文本

wgxvkvu9  于 2023-09-28  发布在  Babel
关注(0)|答案(4)|浏览(181)

当我试图将JSX代码编译成JS时,我从Babel得到了一个错误。我是新的React,所以道歉,如果这是一个明显的问题,我无法找到任何关于它似乎相关。我尝试在这段代码中使用props,并将pageTitle prop传递给FieldContainer组件。这给了我一个问题,虽然,这不是让代码编译为JS。我在搜索中发现,应该在{}之间传递prop值,但添加这些值没有帮助。有什么想法吗?谢谢!

rur96b6h

rur96b6h1#

很难判断你在这里要做什么,但是正如错误所说,属性的值必须是表达式{foo}或引用文本"foo"
在这种情况下

Child={<LoginForm />}

Child={LoginForm}

可能就是你想要的

nr9pn0ug

nr9pn0ug2#

我得到这个错误,因为我未能引用JSX内部的属性:

<span aria-hidden=true ...

本应

<span aria-hidden="true" ...
4dc9hkyq

4dc9hkyq3#

面对同样的问题,我在写
component="Contacts"
通过将其重写为:
component={Contacts}

nsc4cvqm

nsc4cvqm4#

我在向动态呈现的列表传递一些 prop 时遇到了这个问题。

<ul>
  {myList.map(item => <li> <CustomComponent data=item /> </li>)}
</ul>

我假设动态属性(item)将被计算,因为我已经将所有内容 Package 在{}中。但事实并非如此,我还必须将每个动态属性 Package 在{}中。

<ul>
  {myList.map(item => <li> <CustomComponent data={item} /> </li>)}
</ul>

相关问题