Question

我是新来的反应者（从某种意义上说，我还没有完成我已经开始的项目），并且试图对构建组件的工作流程有一个更扎实的认识。

我已经克隆了这个项目： https://github.com/bjones256/facebook-clone

我要制作的组件是一个“得分”组件，将在用户个人资料中列出。得分将通过用户帖子的观看次数和喜欢次数的总和来计算。

我不希望这样做为我做，但是我还想就如何设计此组件的思考过程提供建议。

目前，我没有看到哪个函数计算帖子上的赞/评论数量，因此无法在分数组件的构造函数中进行设置。有什么建议吗？我会使用codementor，但是现在我很烦：P

Answer 1

创建类组件

为了创建一个类组件，我们必须给它起一个名字。在下面的代码中，我们将类组件称为“示例”。我们所有的组件代码都将放在省略号（“ ...”）所在的位置。

import React from 'react';

class Example1 extends React.Component {
  ...
}

那很容易！应该注意的是，如果这是其自身文件中的组件，则必须将其导出。有两种方法可以做到这一点。我们可以在类实例化之前添加“ export default”，也可以在导出它的类之后简单地放置一行。示例如下：

export default class Example2 extends React.Component {
  ...
}

or

class Example3 extends React.Component {
  ...
}
export default Example3;

向类组件添加状态

类组件的另一个巨大好处是状态。如前所述，状态允许我们在组件中管理数据。状态是使用React的最大优势之一（尽管该概念不是特定于React的），并且要使用它，我们需要一个类组件。

要开始使用状态，我们需要在类组件中添加一个构造函数。您可以在此处阅读有关构造函数的更多信息，但是现在您只知道这是向我们的组件添加状态所必需的。通常，我们会看到“ props”作为构造函数的参数传入，因此我们可以使用任何传递到此组件中的props。下面的示例对此进行了说明。

class Example4 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      ...
    }
  }
}
export default Example4;

使用render方法渲染我们的JSX

在构造函数之后，我们可以添加一个render方法，该方法将返回我们的JSX。应该注意的是，在React中，return（无论组件类型如何）只能返回一个直接元素。这意味着我们为创建该组件而编写的所有JSX必须包装在外部元素（例如）中。下面的示例说明了它的构建方式。

class Example5 extends React.Component {
  ...
  render() {
    return (
      <div>
        <p>Hello World!</p>
      </div>
    )
  }
}

组件中的自定义功能

类组件的另一个好处是能够编写用于组件的函数。这很简单。我们可以在构造函数和渲染方法之间编写一个函数。就像其他JavaScript函数一样，我们可以传递任何必要的参数。不过，还有另一步骤可以使这项工作。在构造函数内部，我们需要将'this'关键字绑定到该方法，以便可以在任何地方使用它。为此，我们可以使用以下代码：

  this.customFunction = this.customFunction.bind(this);

本文底部的示例将对此进行更多说明，以便您可以更好地了解这些东西如何组合在一起。

使用组件

如果我们的组件位于单独的文件中，则首先需要将组件导入到要使用的文件中。我们可以使用以下代码做到这一点：

import Example6 from './path/to/component';

一旦导入，我们可以使用在导入中为其分配的名称将其添加到JSX中。例如，我们可以添加如下导入的组件：

<Example6 />

道具

那么，如果我们希望将数据传递到组件中，而不必在组件中进行任何硬编码或在组件内进行任何类型的查询该怎么办？道具就是在这里出现的。道具是我们以自己喜欢的名称传递给组件实例的数据，以便我们可以在该组件中访问它。

假设我们要将字符串“ Hello World”传递到我们的组件中。分配道具时，我们需要为道具命名。这应该告诉我们确切的含义。由于这是一个演示，因此我将仅使用“文本”，但在实际应用中，它应更具描述性。我们可以这样做：

<Example6 text="Hello World" />

在组件内部接收道具

好的，那么我们已经将道具传递到了组件中，现在呢？我之前说过，当我们创建组件的构造函数时，通常会将props放入参数中。这就是我们的组件接收我们传递给它的道具的方式。到达那里后，我们可以使用this.props.NameOfProp在JSX中访问它们，如下所示：

<p>{ this.props.text }</p>

上面的代码将在p标签中呈现“ Hello World”。容易撒尿吧？

完整代码

// First we create our class
class Greeting extends React.Component {

// Then we add our constructor which receives our props
constructor(props) {
    super(props);
    // Next we establish our state
    this.state = {
        name: '',
        greeting: `Good ${this.props.time}, `
    }
    // To use the 'this' keyword, we need to bind it to our function
    this.onChange = this.onChange.bind(this);
}

// A custom function to change the name in our state to match the user input
onChange(e) {
    this.setState({
        name: e.target.value
    })
}
// The render function, where we actually tell the browser what it should show
render() {
    return (
        <div>
            <section className="section">
                <label className="label">Name:</label>
                <input className="input" name="name" placeholder="Enter your name..." onChange={this.onChange} />
            </section>
            <section className="section">
                <p>{this.state.greeting} {this.state.name}</p>
            </section>
        </div>
    )
}
}



ReactDOM.render(<Greeting time="morning" />, document.getElementById('app'));

有关如何设计组件的建议

1 个答案: