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

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
}

How can i do this? Should i change ways to do this?

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

You need to create an object with keys as enum members:

enum resultKeys {
  fail,
  success,
}

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

Or if every member of result is the same StyleDiv component you can store only children as the value of each key in result:

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);