Question

我在一些源代码中看到，作者写了这样一个组件：

import React from 'react';

export const Login = () => (
  <div>
    <h4>Hello World</h4>
  </div>
);

export default Login;

我不知道的是：

如何通过仅使用导入
如何添加其他回调方法，例如viewDidMount ...我已在代码块中添加但编译失败。

感谢

Answer 1

这是功能无状态组件。它适用于简单的组件。

您还可以添加如下组件属性类型：

export const Login = () => (
  <div>
    <h4>Hello World</h4>
  </div>
);

Login.propTypes = {
  username: React.PropTypes.string.isRequired,
}

你可以像这样添加回调：

// this place to define callback is more effective 
const onClick = e => (...)

const Login = props => {
  // or define here if you need access to props in onClick
  const onClick = e => (...)

  return <button onClick={onClick}>Submit</button>
}

Answer 2

由于转换，React“知道”您编写的代码是React Component。 Transpilation是在构建期间发生的过程，其中您的代码从您编写的代码更改为其他内容。

对于React和JSX，您的代码变为

fill

尖括号（export const Login = () => ( React.createElement('div', {}, React.createElement('h4', {}, 'Hello World') ); );）是<的语法糖，人们使用尖括号，因为它们更易于使用和输入。

React组件而不扩展React Component类

2 个答案: