只能为 JSX 属性分配一个非空表达式

作者

JSX 属性只能被赋值一个非空表达式

JSX attributes must only be assigned a non-empty expression

React.js 错误“JSX attributes must only be assigned a non-empty expression”发生在我们忘记为组件传递 prop 值时。

要解决错误，请将 prop 值传递给组件或删除 prop 声明。

jsx 属性只能下注分配非空

下面是错误如何发生的示例。

应用程序.js
import React from 'react';

import {Header} from './Header';

export default function App() {
  return (
    <div>
      {/* ⛔️ JSX attributes must only be assigned a non-empty 'expression'. */}
      <Header message={} />
    </div>
  );
}

错误是因为我们message在组件上声明了一个 prop Header
，但没有为它设置值。

大多数情况下，您的错误消息会在导致问题的道具下划线。

传递一个 prop 给组件

解决错误的一种方法是将 prop 传递给组件。

应用程序.js
import React from 'react';

import {Header} from './Header';

export default function App() {
  return (
    <div>
      <Header message={4200} objProp={{name: 'James', age: 30}} />
    </div>
  );
}

请注意，在传递对象属性时，我们使用了两组大括号。

现在Header组件可以使用传入的道具。

标题.js
export function Header({message, objProp}) {
  return (
    <div>
      <h2>Message: {message}</h2>
      <h2>{objProp.name}</h2>
      <h2>{objProp.age}</h2>
    </div>
  );
}
如果错误未解决，则必须重新启动开发服务器并重新加载 IDE。

您将以相同的方式将函数作为 prop 传递。

应用程序.js
import React from 'react';

import {Header} from './Header';

export default function App() {
  return (
    <div>
      <Header
        message={4200}
        changeHandler={event => {
          console.log(event.target.value);
        }}
      />
    </div>
  );
}

changeHandler这就是我们在组件中使用该函数的方式Header
。

标题.js
export function Header({message, changeHandler}) {
  return (
    <div>
      <h2>Message: {message}</h2>

      <input type="text" onChange={changeHandler} />
    </div>
  );
}

移除空的 prop 声明

该错误的另一种解决方案是删除空的 prop 声明。

应用程序.js
import React from 'react';

import {Header} from './Header';

export default function App() {
  return (
    <div>
      <Header />
    </div>
  );
}

在上面的示例中我们没有空的 prop 声明，因此错误已解决。