向 Chakra UI <Text> 元素添加换行符？

Question

我正在尝试将验证器警告消息添加到注册表单的前端。我的应用程序是一个使用 Chakra UI 设计风格的 React.js 应用程序。我的验证器挂钩函数如下所示：

const passwordValidation = () => {
    const regex =
      /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/;
    if (!regex.test(formState.password) || formState.password === "") {
      setPasswordMessage(
        "*This is a required field. Please meet the following password requirements: A minimum of 8 characters. At least one uppercase letter. At least one lower case letter. At least one numerical character. At least one special character."
      );
    } else {
      setPasswordMessage("");
    }
  };

这是密码消息显示在前端的地方：

<FormControl data-test="password-input" id="password">
              <FormLabel>Password: </FormLabel>
              <Input
                placeholder="******"
                name="password"
                type="password"
                value={formState.password}
                onChange={handleChange}
                required
              />
              <Text color="#FF0000" fontSize="md">
                {passwordMessage}
              </Text>
            </FormControl>

我希望在每个列出的密码要求之后都有换行符，但我似乎无法以这种方式设置文本格式。

我首先尝试添加换行符标签，如下所示：

const passwordValidation = () => {
    const regex =
      /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/;
    if (!regex.test(formState.password) || formState.password === "") {
      setPasswordMessage(
        "*This is a required field. Please meet the following password requirements: \n\n A minimum of 8 characters. \n At least one uppercase letter. \n At least one lower case letter. \n At least one numerical character. \n At least one special character."
      );
    } else {
      setPasswordMessage("");
    }
  };

这不起作用，所以我尝试了另一种方法：

const passwordValidation = () => {
    const regex =
      /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/;
    if (!regex.test(formState.password) || formState.password === "") {
      setPasswordMessage(
        "*This is a required field. Please meet the following password requirements: <br> A minimum of 8 characters. <br> At least one uppercase letter. <br> At least one lower case letter. <br> At least one numerical character. <br> At least one special character."
      );
    } else {
      setPasswordMessage("");
    }
  };

这些都不起作用。有没有办法在我的验证器挂钩函数中使用换行符来格式化此文本？

Answer 1

Text

元素接受字符串或 JSX。如果您传递一个字符串，它将按原样呈现，而不是解析为 HTML。相反，传递一个 JSX 元素。

将 RegExp 移到函数之外，这样在调用函数时就不会重新创建它：

const regex =
  /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/;

该函数应返回 JSX 或空字符串。它不需要设置状态，因为该值源自

formState.password

。此外，设置另一个状态会导致不必要的重新渲染：

const getPasswordValidation = ({ password }) =>
  !regex.test(password) || password === ''
  ? (
    <>* This is a required field. Please meet the following password requirements: <br> A minimum of 8 characters. <br> At least one uppercase letter. <br> At least one lower case letter. <br> At least one numerical character. <br> At least one special character.</>
  )
  : '';

使用

formState

调用该函数以获取消息：

<Text color="#FF0000" fontSize="md">
  {getPasswordValidation(formState)}
</Text>