Question

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

我的问题是，如何在React.js中不使用任何CSS库或框架（例如，Bootstrap，SemanticUI等）创建我自己的自定义Button组件，例如antDesign团队如何创建它。

通过一些解释和示例，我们将不胜感激。

Answer 1

您可以使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' />

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

Answer 2

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

例如：

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

这就是创建组件的全部，现在可以在代码中调用此组件并使用它。

但是我想这并不是您想要的。在制造某些复杂零部件时，主要是在制造零部件之前需要牢记一些因素。您可以向自己问一些问题。

仅以按钮为例，按钮组件必须执行或必须执行的某些操作。

有人单击按钮会发生什么？（声音转储，但可能是最重要的声音）
用户可以更改按钮的文本吗？按钮的默认文本是什么？
用户是否可以通过单击按钮来调用自己的功能？
按钮的默认样式是什么？
用户可以禁用按钮吗？
按钮也可以包含图标吗？
用户可以更改按钮的样式吗？
用户如何通过覆盖CSS中的样式或将其传递给props来更改默认样式？
.... etc

现在请记住这些，让我们说我们正在制作一个具有以下两个功能的小按钮组件：

用户可以单击按钮并调用自己的函数，如果未提供，则什么也不会发生。
用户可以通过道具或通过覆盖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 */
}

如何在react.js

2 个答案: