如何在 react.js 中创建自己的 Button 组件，如 ant design

Question

我想创建自己的组件，所以我查看了 antDesign，它是 React.js 最流行的库之一。

我的问题是如何在不使用任何 CSS 库或框架（如（Bootstrap、SemanticUI 等））的情况下在 react.js 中创建自己的自定义按钮组件，就像 antDesign 团队如何创建它一样。

如果能提供一些解释和示例，我们将不胜感激。

Answer 1

如果你想制作一个组件，只需制作一个函数并在需要的地方使用该函数。

例如：

// buttonComponent.js
export default buttonComponent = () => {
  <button>Hi I am a button</button>
}

这就是你创建的所有组件，现在可以在你的代码中调用这个组件并使用它。

但我想这不是你想要的。主要是在制作一些复杂的组件时，在制作组件之前需要牢记一些因素。你可以通过问自己一些问题来做到这一点。

让我们仅举一个按钮的例子，按钮组件必须做或具有某些事情。

• 当有人单击按钮时会发生什么？ （听起来很垃圾，但可能是最重要的）
• 用户是否可以更改按钮的文本，按钮的默认文本是什么？
• 用户是否可以在单击按钮时调用自己的函数？
• 按钮的默认样式是什么？
• 用户是否可以禁用该按钮？
• 按钮是否也可以包含图标？
• 用户是否可以更改按钮的样式？
• 用户如何通过覆盖 css 中的样式或通过 props 传递来更改默认样式？
• ....等

暂时记住这些，假设我们正在制作一个具有以下两个功能的小按钮组件：

• 用户可以点击按钮并调用自己的函数，如果没有提供，则不会发生任何事情。
• 用户可以通过 props 或覆盖 css 来更改按钮的默认样式。

那么代码将是：

// MyButtonComponent.js

export default MyButtonComponent = ({userFunction, userStyle, children}) => {
  <button type="button" onClick={userFunction} style={userStyle} className="my-button-compnonet">
    {children}
  </button>
}

// MyButtonComponent.css
.my-button-component {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
  display: inline-block;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  border: 1px solid transparent;
  padding: .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: .25rem;
}

这就是我们所有的小按钮组件完成了。

现在调用这个组件

// mainCompnonet.js

.....
/* callback function on button click */
myFunction = (e) => {
 alert("yeah my button component on click");
}

/* override the default style through the props */
myStyle = {
  borderRadius: 1rem;
}
.....
<MyButtonComponent userFunction={myFunction} userStyle={myStyle}>
 Hi This is my component Button 
</MyButtonComponent>
......

// mainCompnonet.js
.my-button-component {
  color: #000;  /* overrides our component style through css */
}

Answer 2

您可以为Button制作一个通用组件，如下所示：

import React from 'react';
import styled from 'styled-components';

const PrimaryButton = styled.button`
    color: #fff;
    background-color: #1890ff;
    border-color: #1890ff;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.12);
    -webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.045);
    box-shadow: 0 2px 0 rgba(0,0,0,0.045);
`

const Button = (props) => {
    return (
        <PrimaryButton>
            {props.text}
        </PrimaryButton>
    );
};

export default Button;

在这里，您可以从父组件中获取道具并进行相应的设计。在此示例中，我使用了styled-components，因为它根据道具提供了 css 的用法。我刚刚在这里展示了主按钮。

从一个调用组件，

<Button type='primary' text='Reset' size={10} disabled={false} icon={'imgUrl'} shape='round' />

除了示例中所示之外，您还可以传递更多内容。