在 React 上重用组件

Question

我正在使用 React，我正在尝试重用一些代码，因为我必须在每个页面上放置一个按钮；所以我将它声明为另一个组件上的函数，并试图在我的一个页面上调用它，但出现错误：

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

我有组件：

    export const whatsappLink = () => {
      return (
        <a
          href=""
          className="link-simulator floating"
          target="_blank"
        >
          <i className="fab fa-whatsapp my-float"></i>
        </a>
      );

};

我在渲染中这样调用它：

<div>{whatsappLink}</div>

为什么我会收到这个错误？我应该怎么称呼它？

Answer 1

您应该使用 JSX 标记语法来呈现功能组件，名称也应该是 PascalCased，即第一个字母应该大写。尝试渲染像 {whatsappLink} 这样的组件会导致错误，因为函数不能是有效的 React 子组件。

// when trying to render the WhatsappLink component
<div>
  <WhatsappLink/>
</div>

// define WhatsappLink component
export const WhatsappLink = () => {
   return (
     <a
       href=""
       className="link-simulator floating"
       target="_blank"
     >
       <i className="fab fa-whatsapp my-float"></i>
     </a>
   );
};

Answer 2

有两种呈现“什么是应用程序 link”的方法：作为 React 功能组件，或 return 是 JSX.Element 的函数。

假设您有一个名为“App”的父组件，它想要呈现什么是应用程序 link。为了简单起见，该函数将如下所示：

function App() { 
 return (
  <div>
    {/* whats app link */}
  </div>
 )
}

React 功能组件

创建一个名为 WhatsAppLink 的功能组件。所有 React 组件都使用 PascalCase 命名约定。进行此更改的唯一更新是函数名称：

export const WhatsAppLink = () => { 
 return (
        <a
          href=""
          className="link-simulator floating"
          target="_blank"
        >
          <i className="fab fa-whatsapp my-float"></i>
        </a>
      );
}

您也可以使用函数表达式语法：

function WhatsAppLink(){ 
 return (
  {/* your return html */}
 )
}

export default WhatsAppLink

要在您 App 中呈现它，只需使用 JSX：

function App() { 
 return (
  <div>
    <WhatsAppLink />
  </div>
 )
}

ReturnsJSX 元素

的函数

这很可能是您最初想要的。只需在“App”组件中创建一个函数，然后在 JSX 中调用它即可 return 元素。

您的“应用程序”组件如下所示：

function App() { 
 const renderWhatsAppLink = () => { 
  // you can call this function whatever you like
  // the naming convention is camelCase 
  return (
   <a
          href=""
          className="link-simulator floating"
          target="_blank"
        >
          <i className="fab fa-whatsapp my-float"></i>
        </a>
  )
 }

 return (
  <div>
   {renderWhatsAppLink()} // remember to invoke the function to access the return
  </div>

 )
}

React 功能组件与 Returns JSX

的功能

使用 React 功能组件的好处是您可以将数据传递给名为 props 的组件。如果你真的打算重用这个组件，你可以将 hrefLink 之类的东西作为道具传递并在组件中访问它。您甚至可以将子项、函数等传递给组件。

只有当你知道它不会在应用程序的其他任何地方使用时，才使用 Returns JSX 的功能。当您开始三次使用该函数时，可能是时候将其转换为 React 函数式组件了。

关于 JSX 的注释

JSX 允许您在 HTML 中使用 Javascript 并使用 { } 大括号。如果你像以前那样在其中传递一个函数 {whatsAppLink} 什么都不会发生，因为你没有调用该函数。

在 React 上重用组件

Reutilizing components on React

reactjs

href

reusability