Typescript中的变量模板

t9aqgxwy  于 2023-02-05  发布在  TypeScript
关注(0)|答案(1)|浏览(163)

我需要两个函数绑定在两个按钮。他们是如此相似,只有一个字符串是不同的。

const onClickLoginA = (): void => {
  const loginURI = `http://.../.../A`;

  window.open(loginURI, `Login with A`);
}

const onClickLoginB = (): void => {
  const loginURI = `http://.../.../B`;

  window.open(loginURI, `Login with B`);
}

在C++中,我可以用

template <string str>
void onClickLogin()
{
    const string uri = "http://.../.../" + str;

    system("open " + uri);
}

有没有简单的方法可以将这两个函数合并为一个,而不需要任何参数?
∮我的解决方案∮

function onClickLogin(target) {
  return () => {
    const loginURL = `http://.../.../{target}`;
    window.open(loginURL, `Login with {target}`);
  }
}

const onClickLoginA = onClickLogin(A);
const onClickLoginB = onClickLogin(B);
mmvthczy

mmvthczy1#

您可以使用以下方法:

let suffix = 'A'
const onClickLoginA = (): void => {
    const loginURI = `http://.../.../${suffix}`;

    window.open(loginURI, `Login with ${suffix}`);
}

Playground
如果你可以使用全局变量,你可以坚持使用这个解决方案。否则我建议你使用suffix作为参数。
我假设onClickLoginA是一个按钮上的回调/事件处理程序,如果你想给回调提供一个参数,你可以使用这个方法:

<button onClick={()=>onClickLoginA('A')}>

或者您可以curry您的函数:

const onClickLoginA = (suffix: string) => () => {
    const loginURI = `http://.../.../${suffix}`;

    window.open(loginURI, `Login with ${suffix}`);
}
<button onClick={onClickLoginA('A')}>

上述示例是react中的常见模式。

相关问题