自定义 React-Bootstrap 组件

2020-11-04 08:00:00 · 飞浪

通过自定义基础组件以使其满足应用程序的需求，Bootstrap 可帮助您在应用程序中构建组件和 UI 时快速迭代。

介绍

使用 Bootstrap 构建应用程序可帮助您在构建组件和应用程序的用户界面设计时快速迭代。这样可以防止您每次开始新项目时都重新设计轮子。您需要做的就是自定义可用的基本组件，使其满足应用程序的需求。本指南将演示如何自定义 react-bootstrap 组件以满足您的需求。

设置 react-bootstrap

首先，在终端中运行以下命令来设置你的 React 项目。

npx create-react-app <YOUR_APP_NAME>

cd <YOUR_APP_NAME>

yarn start or npm start

<YOUR_APP_NAME>指的是您想要赋予 React 项目的名称。

如果你真的想快速开始，而又不想费力地设置 create-react-app 项目，那么请打开浏览器并访问https://react.new ，通过https://codesandbox.io获取完全配置的 React 开发环境。

使用 Bootstrap

Bootstrap 有几种不同的使用方式：

下载 Bootstrap 生产文件
将 CDN 链接添加到您的 HTML 文件。
通过包管理器（例如 npm 或 yarn）下载。

在本指南中，您将使用包管理器安装 Bootstrap，并安装 React Bootstrap 库，该库附带您可以轻松使用的 React 组件。

运行以下命令安装 react-bootstrap。

      npm install react-bootstrap bootstrap

							OR

yarn add react-bootstrap bootstrap

React Bootstrap 不使用 Bootstrap 的精确版本，但您需要添加一些默认样式才能使用组件。将以下代码行添加到您的src/index.js或src/App.js文件中。

      import 'bootstrap/dist/css/bootstrap.min.css'

自定义卡片组件

假设您正在构建一个电子商务应用，显示产品列表将需要一个包含产品详细信息的卡片组件。幸运的是，有一个卡片组件可以在此基础上快速提供此功能。

首先创建产品卡组件。

      import React from 'react';
import Card from 'react-bootstrap/Card';
import Button from 'react-bootstrap/Button';

function ProductCard({name, imgSrc, price,currency, ...props}){

	return(
	<Card style={{ width: '18rem' }}>
	  <Card.Img variant="top" src={imgSrc} />
  <Card.Body>
    <Card.Title>{name}</Card.Title>
    <Card.Text>
      {currency} {price}
    </Card.Text>
    <Button variant="success">Add to Cart</Button>
  </Card.Body>
</Card>
	)
}

export default ProductCard;
    

在上面的<ProductCard/>组件中，您在 react-bootstrap 中的默认卡片组件基础上构建了一个自定义组件。

假设您在components/ProductCard.js目录中创建了组件，则您可以使用自定义组件，如下所示。

      import React from 'react';
import ProductCard from './components/ProductCard';

function App(){
	return(
		<ProductCard name="Red Hoodie" price="90.00" currency="$" imgSrc="https://img.foo.com/logo.png"/>
	)
}
export default App;
    

自定义按钮组件

现在使用与创建卡片组件相同的过程，创建一个接受href属性的自定义按钮，如下面的代码片段所示。

      import React from 'react';
import Card from 'react-bootstrap/Card';
import Button from 'react-bootstrap/Button';

function ButtonLink({text, link, ...props}){

	return(
				<Button href={link}>Link</Button> <Button type="submit">{text}</Button>
	)
}

export default ButtonLink;
    

结论

瞧！在本指南中，您创建了一个自定义按钮和卡片组件，以帮助您更快地构建应用程序。如果您想阅读有关 react-bootstrap 的更多信息，请访问官方文档以了解更多信息。尽可能多地尝试更多示例以获得扎实的理解。如果您有任何疑问，请随时在 Twitter 上联系我@DesmondNyamador

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

自定义 React-Bootstrap 组件

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

import React from 'react'; import Card from 'react-bootstrap/Card'; import Button from 'react-bootstrap/Button'; function ProductCard({name, imgSrc, price,currency, ...props}){ return( <Card style={{ width: '18rem' }}> <Card.Img variant="top" src={imgSrc} /> <Card.Body> <Card.Title>{name}</Card.Title> <Card.Text> {currency} {price} </Card.Text> <Button variant="success">Add to Cart</Button> </Card.Body> </Card> ) } export default ProductCard;

import React from 'react'; import ProductCard from './components/ProductCard'; function App(){ return( <ProductCard name="Red Hoodie" price="90.00" currency="$" imgSrc="https://img.foo.com/logo.png"/> ) } export default App;

import React from 'react'; import Card from 'react-bootstrap/Card'; import Button from 'react-bootstrap/Button'; function ButtonLink({text, link, ...props}){ return( <Button href={link}>Link</Button> <Button type="submit">{text}</Button> ) } export default ButtonLink;