TypeScript 特性：使用jsx选择提取函数应该被替换为jsx sfc

zbdgwd5y 于 10个月前发布在 TypeScript

关注(0)|答案(6)|浏览(105)

建议
如果我们选择jsx元素并进行提取重构，编辑器应该以jsx的方式重构它。

示例

function Foo({ items }: { items: { id: number; name: string }[] }) {
    return <div>{items.map(item => <div>{item.id}: {item.name}</div>)}</div>;
}

重构后应该是

function Foo({ items }: { items: { id: number; name: string }[] }) {
    return <div>{items.map(item => <Bar id={item.id} name={item.name}/>)}</div>;
}
function Bar(item: { id: number; name: string; }) {
    return <div>{item.id}: {item.name}</div>;
}

当前行为

typescript

来源：https://github.com/microsoft/TypeScript/issues/25891

6条答案

按热度按时间

sauutmhj1#

我会说在这个上下文中应该提供一个新的重构功能，以将JSX元素提取到SFC。

赞(0）回复(0）举报 10个月前

4si2a6ki2#

但是新重构的源代码几乎与主提取函数重构相同，对吗？或者我们可以重用现有的代码？

赞(0）回复(0）举报 10个月前

cuxqih213#

这与源代码无关。相同的重构实现可以为用户提供多种重构。例如，extractFunction为每个包含范围提供一种重构方式。它仍然是相同的实现，只是给了用户选择。

赞(0）回复(0）举报 10个月前

nsc4cvqm4#

我认为在选择一段jsx代码时，这样做会更明显且有用：

function Component({title, subtitle, author, publishedDate, text}){
  return (
    <div>
      <h1>{title}</h1>
      <h2>{subtlitle}</h2>
      <div className="byline">
        <a href={author.url}>{author.name}</a> ({publishedDate})
      </div>
      <p>{text}</p>
    </div>
  )
}

当选择并提取 .byline div 并提取它时，应该用jsx调用函数替换它，如下所示：

function Component({title, subtitle, author, publishedDate, text}){
  return (
    <div>
      <h1>{title}</h1>
      <h2>{subtlitle}</h2>
-      <div className="byline">
-        <a href={author.url}>{author.name}</a> ({publishedDate})
-      </div>
+      <Byline author={author} publishedDate={publishedDate} />
      <p>{text}</p>
    </div>
  )
}

为了正确地工作，有必要使函数只接受一个参数，以便将其作为props发送。也就是说，在上述场景中的实现将是

function Byline({author, publishedDate}){
  return (
    <div className="byline">
      <a href={author.url}>{author.name}</a> ({publishedDate})
    </div>
  )
}

展开查看全部

赞(0）回复(0）举报 10个月前

kyxcudwk5#

也许我们可以通过添加一些较小的重构操作，然后将它们组合在一起来创建一个较大的重构。

将函数提取到模块作用域
将参数转换为解构对象
将调用表达式转换为JSX元素
这里有一个视频，我在其中演示了如何使用上面的例子：https://www.loom.com/share/4498fb6487bf42c39aa59a4a52dee5a1
前两个重构操作已经存在，所以我们只需要添加第三个操作("将调用表达式转换为JSX元素")。(如果有人对此感兴趣，我已经编写了一个版本，我很乐意与大家分享。)
一旦我们有了这个，TypeScript(以某种方式)可以将这些重构操作打包成一个更大的操作，并将其命名为“将JSX提取为组件”。
在我的工作场所，我们更喜欢使用函数表达式而不是函数声明来编写组件。这需要额外的一些步骤：
将函数提取到模块作用域(如前所述)
将参数转换为解构对象(如前所述)
将函数声明转换为箭头函数
注解为 React.FC
将调用表达式转换为JSX元素(如前所述)
https://www.loom.com/share/01281c815f5b44d38b3774df37ce703a