代码之家 › 专栏 › 技术社区 › Sventies

React-如何在不使用构造函数的情况下访问道具

eslint react-native reactjs javascript

Sventies · 技术社区 · 8 年前

注意:我在使用React Native时遇到了这个特定问题,但我想这也适用于React。

我有一个使用react构建的react组件。组成部分我不需要设置状态,但我有道具。我提出的语法如下:

class Header extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <div>{this.props.title}</div>;
  }
}

我知道我可以使用函数来构造此组件,如下所示:

const Header = (props) => {
  return <div>{props.title}</div>;
}

但我更喜欢前者,因为我的组件将增长,可能有状态等,我只想让我的所有组件以类似的方式构建。

现在,我的linter抱怨说有一个无用的构造函数,但我如何在保留类构造函数而不是函数构造函数的同时访问道具呢?

2 回复 | 直到 7 年前

Stanley Cheung 8 年前

如果你想用这个。在构造函数中,需要将道具传递给super。否则,这无关紧要,因为React集合。调用构造函数后,立即从外部对实例进行props。

因此,如果没有用,只需删除构造函数()

Adolfo Onrubia 8 年前

class XXXXXX extends React.Component {
   render() {
       return (
          <div>{this.props.value}</div>
       )
   }
}

推荐文章

srbrills · ESLint预处理层:分析错误:意外的令牌

1 年前

Get Off My Lawn · 如何让eslint选择具有特定类的className的jsx元素?

1 年前

Ole · 在eslint推荐的配置中添加忽略项?

2 年前

Jim · ESLint:为什么没有未使用的表达式失败?

2 年前

user3086509 · wait对这种表达没有影响,但显然有

2 年前

Relm · React Eslint,如果组件props Type需要一个prop,但组件没有使用它,则发出警告

2 年前

Sergiu Nimat · 一旦我们更新了Node版本,如何更新NPM和解决方案相关的前端库/包?

2 年前

Arnaud Denoyelle · 避免混淆2种不同的ID类型

2 年前

Thanh-Quy Nguyen · 导入/订单无法识别未命名的导入?

2 年前

myol · 重写返回任意的函数类型签名

2 年前