Warm tip: This article is reproduced from serverfault.com, please click

其他-如何使用枚举将jsx保存在react / typescript中

(其他 - How to use enum to save jsx in react/typescript)

发布于 2020-11-28 06:46:54
enum result{
    fail=(<StyleDiv>fail</StyleDiv>),
 success=(<StyleDiv>success</StyleDiv>)
}
function(){
return result.fail
}

我怎样才能做到这一点?我应该改变做这件事的方式吗?

Questioner
mock mock
Viewed
11
Николай Гольцев 2020-11-28 15:30:26

你需要创建一个具有键作为枚举成员的对象:

enum resultKeys {
  fail,
  success,
}

const result = {
  [resultKeys.fail]: <StyleDiv>fail</StyleDiv>,
  [resultKeys.success]: <StyleDiv>success</StyleDiv>, 
};

或者,如果的每个成员result都是相同的StyleDiv组件,则你只能存储子代作为结果中每个键的值:

enum resultKeys {
  fail,
  success,
}

const result = {
  [resultKeys.fail]: "fail",
  [resultKeys.success]: "success", 
};

function getStyleDiv(key: resultKeys): JSX.Element {
  return <StyleDiv>{result[key]}</StyleDiv>;
}

const fail = getStyleDiv(resultKeys.fail);