ReactJS：如何传递字符串以用作函数名？

Question

I'm building a menu with React. How can I pass a string to a component to use it as a function name?

What's working:

<Link to={ROOM({ roomId })}>home</Link>

I'm refactoring the components now. I have a component MobileMenu with the Link defined as:

  <MobileMenuLink service={'ROOM'} />

In a second component I've defined the MobileMenuLink as:

const MobileMenuLink = ({ style, className, roomId, service }) => {
  return (
    <Base style={style} className={className}>
      <MenuLink>
        <Link to={service({ roomId })}>home</Link>
      </MenuLink>
    </Base>
  )
}

How is this possible?

Answer 1

Don't pass a string, pass the ROOM function to MobileMenuLink :

<MobileMenuLink service={ROOM} />

And call service as you do now, because it's a function:

<Link to={service({ roomId })}>home</Link>