如何将样式化的组件而不是字符串消息传递给 formik 的感谢响应

Question

我的 formik 联系表单 return 在成功提交后表单下有一个 "thanks" 字符串，我希望它成为 return 样式化的组件，以便可以对其进行样式化。

这条成功的 return 字符串 "thanks" 消息，尽管它没有样式：

const ContactForm = () => {
    const classes = useStyles()

    const [serverState, setServerState] = useState()
    const handleServerResponse = (ok, msg) => {
        setServerState({ ok, msg })
    }

    const handleOnSubmit = (values, actions) => {
        axios({
            method: "POST",
            url: "https://formspree.io/user-id",
            data: values
        })
            .then(response => {
                actions.setSubmitting(false)
                actions.resetForm()
                handleServerResponse(true, "Thanks!") //returns unstyled string at the bottom of the page
            })
            .catch(error => {
                console.log(error)
                actions.setSubmitting(false);
                handleServerResponse(false, error.response.data.error);
            })
    }

这个return什么都没有：

const ContactForm = () => {
    const classes = useStyles()

    const [serverState, setServerState] = useState()
    const handleServerResponse = (ok, msg) => {
        setServerState({ ok, msg })
    }

    const handleOnSubmit = (values, actions) => {
        axios({
            method: "POST",
            url: "https://formspree.io/user-id",
            data: values
        })
            .then(response => {
                actions.setSubmitting(false)
                actions.resetForm()
                handleServerResponse(true, () => { 
                    return (
                        <Thanks>Thanks!</Thanks>  // styled component I'd like to return
                    )
                }
              )
            })
            .catch(error => {
                console.log(error)
                actions.setSubmitting(false);
                handleServerResponse(false, error.response.data.error);
            })
    }

如何在这里成功引用自己的组件？这是我整理的codesandbox

Answer 1

我会这样做：

const ContactForm = () => {
    const classes = useStyles()

    const [serverState, setServerState] = useState()
    const handleServerResponse = (ok, msg) => {
        setServerState({ ok, msg })
    }

    const handleOnSubmit = (values, actions) => {
        axios({
            method: "POST",
            url: "https://formspree.io/user-id",
            data: values
        })
            .then(response => {
                actions.setSubmitting(false)
                actions.resetForm()
                handleServerResponse(true, "Thanks!") //returns unstyled string at the bottom of the page
            })
            .catch(error => {
                console.log(error)
                actions.setSubmitting(false);
                handleServerResponse(false, error.response.data.error);
            })
    }

    if (serverState && serverState.ok && serverState.msg) return <Thanks>{ serverState.msg }</Thanks>;

如果您还需要显示表格或其他内容，请在现有 return :).

中包含条件

例如

  return (
     <Fragment>
         <form>
             ...
         </form>
         { serverState && serverState.ok && serverState.msg && (
              <Thanks>{ serverState.msg }</Thanks>
         )}
     </Fragment>
  );

如何将样式化的组件而不是字符串消息传递给 formik 的感谢响应

How to pass a styled component instead of string message to formik's thanks response

javascript

reactjs

styled-components

formik