react组件目录组织_这些天来组织React组件（2018年上半年）-CSDN博客

react组件目录组织

I started typing an answer to a question by @alexharrisonsax since my React book is written for the recent past (React 14) and things change. Twitter is not great for code discussions, so here goes.

自从我的React书是针对最近的历史(第14号React)编写以来，我开始通过@alexharrisonsax输入问题的答案，并且情况发生了变化。 Twitter不适用于代码讨论，因此请按此处。

导入依赖 (Import dependencies)

import React, {Component, Node} from 'react';

声明组件(Declare the component)

class App extends Component {}

Unless it's functional stateless component (preferably), in which case:

除非它是功能性的无状态组件(最好)，否则：

const App = ({name, description}) =>
  <div>
    <h1>{name}</h1>
    <h2>{description}</h2>
  </div>;

流(Flow)

If using Flow, a good idea is to define the types of properties and state, like:

如果使用Flow，一个好主意是定义属性和状态的类型，例如：

type Props = {
  name: string,
  description: string,
};

type State = {
  theTruth: boolean,
};

Then the class declaration becomes:

然后，类声明变为：

class App extends Component<Props, State> {
  state: State = { // property initializer for initial state
    theTruth: false,
  };

  // optional, only if the initial state is not good enough
  // or there are other things you need to do
  constructor(props: Props): void {
    super(props);
    this.state = { 
      theTruth: props.description === 'shall set you freeee',
    }; 
  }

  render(): Node {
    return <div>{/* fun with this.props and this.state */}</div>;
  }
}

Tell your friends about this post on Facebook and Twitter

在Facebook和Twitter上告诉您的朋友有关此帖子的信息