在 ReactJS 组件中设置默认值

Question

我有一个呈现“react-icons”对象的组件。但是，如果没有提供图标，我想在 UI.

上显示“NoIcon”字符串

组件 A 就是这样。

组件 A

import React from 'react';
import { FaHeart} from "react-icons/fa";

const Icon = ({FaIcon = "NoIcon"}) => {
  return (
    <div>
    <FaIcon/>
    </div>
    );
};

export default Icon;

并从另一个 组件 B 调用此组件有效：

组件 B

import React from 'react';
import Icon from './components/icons/icon';
import { FaHeartBroken } from "react-icons/fa";

class App extends React.Component {  
    render(){
        return(
              <Icon FaIcon={ FaHeartBroken }/>
        )      
    }   
}
export default App;

这 return 是一个“心碎图标”，即

但是，如果 组件 B 中没有提供图标，它应该 return 文本，即 UI 中的“NoIcon”。

组件 B

....
....
      <Icon FaIcon/>
....

但是这会引发错误

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: boolean.

Check the render method of `Icon`.

我也尝试在组件A上设置一个or方法来赋值，也没有用。为什么在 Icon 组件中不提供任何参数，而要求进行布尔检查？

组件 A

const Icon = ({FaIcon = FaHeart || "NoIcon"}) => {
    ....

还尝试了这些变化。这些不会引发任何错误，但也不会 return UI 上的任何值。

组件 B

...
 <Icon/>
 <Icon FaIcon = "Test"/>
 <Icon FaIcon = {"Test"}/>

我们如何解决这个问题？

Answer 1

没有值 <Foo bar /> 的 prop 实际上是 shorthand for <Foo bar={true} />.

所以这个：

 <Icon FaIcon/>

不正确。如果您再次阅读该错误，现在可能更有意义：

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: boolean.

这意味着它期待一个 string/class/function，但却得到了一个布尔值。在这种情况下 true 来自道具 shorthand 值。

这意味着你如何省略那个道具，然后你得到默认值。

 <Icon />

其次，这行不通：

const Icon = ({FaIcon = "NoIcon"}) => {
  return (
    <div>
    <FaIcon/>
    </div>
    );
};

要将自定义内容呈现为 JSX，它必须是一个组件。来自 react-icons/fa 的导入是一个组件，但字符串 "NoIcon" 不是。

我认为在这种情况下，有一个条件可能更简单，如果 prop 存在则呈现图标，否则呈现字符串。

类似于：

const Icon = ({FaIcon}) => {
  return (
    <div>
      { FaIcon ? <FaIcon/> : "NoIcon" }
    </div>
  );
};

如果你想要一个道具来处理一个图标组件或一个字符串，你可以通过几种方式来实现。但是如果你希望能够传入图标组件或字符串，那么你可以这样做：

const Icon = ({FaIcon = "NoIcon"}) => {
  return (
    <div>
      { typeof FaIcon === 'string' ? FaIcon : <FaIcon/>  }
    </div>
  );
};

在这种情况下，如果 prop 是一个字符串（也适用于 "NoIcon" 的默认值），则将其呈现为一个字符串。否则假设它是一个组件并渲染它。

在 ReactJS 组件中设置默认值

Setting default value in ReactJS component

javascript

components

functional-programming

reactjs