Question

现在假设我们必须在表单中输出一个select字段。必须根据传递到组件中的数据设置选择选项。

使用es6类时，我们可以在同一个文件中使用一个方法来显示它：

selectForm() {
  <input ....>
  this.props.data.map((data) => {
    option...
  })
}

render() {
  return (
    <div>
       {this.selectForm()}
    </div>
  )
}

我们也可以将它添加到一个单独的文件中，将其作为单独的组件导入并在此文件中使用它，如下所示：

render() {
  return (
    <div>
       <SelectField data={this.props.data}>
    </div>
  )
}

在这两个选项中，推荐的做事方式是什么？

Answer 1

如果您想重用该组件（在select情况下你肯定会），然后将其写入一个单独的文件并导入它。如果它只是一个特定于应用程序的组件，则在应用程序组件本身中执行它（在您的示例中为方法1）。在此处阅读有关可重用组件的更多信息： https://facebook.github.io/react/docs/reusable-components.html

何时何地将React组件分离到单独的文件中？什么时候在同一个文件中？

1 个答案: