在 React 上重用组件答案

【问题标题】：Reutilizing components on React在 React 上重用组件
【发布时间】：2020-11-06 11:45:10
【问题描述】：

我正在使用 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>

为什么会出现这个错误？我该怎么称呼它？

【问题讨论】：

组件是这样使用的<whatsappLink />
我试过了，但我得到这个错误：whatsappLink /> 使用了不正确的大小写。对 React 组件使用 PascalCase，对 HTML 元素使用小写。还有这个：标签在这个浏览器中无法识别。如果您打算渲染一个 React 组件，请以大写字母开头。

标签： reactjs href reusability

【解决方案1】：

有两种方法可以呈现您的“应用程序链接”：作为反应功能组件，或返回 JSX.Element 的函数。

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

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>
 )
}

返回 JSX 元素的函数

这很可能是您最初的目标。只需在“App”组件中创建一个函数并在 JSX 中调用它以返回元素。

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

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 函数式组件与返回 JSX 的函数

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

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

关于 JSX 的说明

JSX 允许您通过 { } 花括号在 HTML 中使用 Javascript。如果您像 {whatsAppLink} 那样在其中传递一个函数，则不会发生任何事情，因为您没有调用该函数。

【讨论】：

【解决方案2】：

你应该使用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>
   );
};

【讨论】：