带超链接的材质 UI 文本字段

Question

将超链接连同文本内容作为值传递给material-ui的TextFeild，但它呈现为字符串（如下图所示）

成分：

import { TextField, Link } from '@material-ui/core'
...

     return (
        <TextField
          multiline={multiline}
          value={value + `  <Link href="https://google.com">Hello</Link>`}
          onChange={onChange}
          onChangeText={onChangeText}
          onFocus={onFocus}
          onBlur={onBlur}
          placeholderTextColor={placeholderTextColor || color.darkenGrey}
          size={size}
          rows={rows}
          style={style}
          inputStyle={inputStyle}
          defaultValue={defaultValue}
          placeholder={placeholder}
          error={error}
          label={label}
          id={id}
          helperText={helperText}
          FormHelperTextProps={{
            classes: {
              root: helperTextClass,
            },
          }}
          type={type}
        >
          {children}
        </TextField>
      )

如何使文本字段呈现链接为可点击的超链接

Answer 1

我认为这是不可能的，TextField 只是渲染纯文本，你应该考虑另一个第 3 方库，例如 SlateJS

Answer 2

来到这篇文章时遇到了类似的问题，对我有用的是将 jsx 元素定义为变量，然后将其作为 prop 传递，如下所示：

import { TextField, Link } from '@material-ui/core'
function test() {
...
          const helperTextHTML = (

            <span>

             Adding textt{" "}

              <a href="https://whatever.com" target="_blank">

                {" "}

                Adding more text

              </a>{" "}

          to debug

            </span>

          );

return (
 <TextField helperText={helperTextHTML}>
)
}