如何创建按钮反应组件？

Question

我创建了简单的 React 应用程序并需要添加按钮组件。不幸的是我的代码不工作。我该如何解决？按钮实现（React）：

import React from 'react';

const Button = (props) => {
    return <button className="button">
        {props.children}
    </button>;
}

export { Button };

测试代码：

import React from 'react';
import { shallow } from 'enzyme';

import Button from './Button';

describe('Button', () => {
    /**

     * children - button text

     */

    it('Button with text', () => {
        const component = shallow(<Button>Button</Button>);

        expect(component.html()).toEqual('<button class="button">Button</button>');
    });
});

files in dir

测试错误：

 Expected: "<button class=\"button\">Button</button>"
 Received: null

Answer 1

你能试试这个吗，

it('Button with text', () => {
        const component = shallow(<Button>Button</Button>);

        expect(component.html()).toEqual('<button class=\"button\">Button</button>');
    });

Answer 2

此导入行：

import Button from './Button';

要求构建从模块中获取默认导出，但您是在对象中导出该组件。

所以要么：

export default Button;

或者：

import { Button } from './Button';

（我还建议在 return 中的 JSX 周围添加括号，并导入一些特定于该组件的 CSS。）

function Button(props) {
  return (
    <button className="button">
      {props.children}
    </button>;
  );
}

export default Button;

如何创建按钮反应组件？

How to create button react component?

javascript

null

frontend

reactjs