React - 希望是简单的链接格式

Question

我有一个表单，在反应中，使用 react-bootstrap。我想通过单选按钮旁边的链接显示服务条款提醒。

这是我的代码：

          <Form.Row>
            {["radio"].map((type) => (
              <div key={`default-${type}`} className="mb-3">
                <Form.Check type={type} checked={false} id={`default-${type}`} value="1" onChange={formik.handleChange} onBlur={formik.handleBlur} label="I accept the"></Form.Check>
                <Link onClick={TosAlert}>{"Terms of Service"}</Link>
              </div>
            ))}
          </Form.Row>

checkbox renders like this:

这是一件小事，但是，谁能帮我把它放在同一行吗？

Answer 1

尝试发送以标记反应节点而不是字符串

<Form.Row>
            {["radio"].map((type) => (
              <div key={`default-${type}`} className="mb-3">
                <Form.Check 
                type={type} 
                checked={false} 
                id={`default-${type}`} 
                value="1" 
                onChange={formik.handleChange} 
                onBlur={formik.handleBlur} 
                label={<>I accept the <Link onClick={TosAlert}>Terms of Service</Link></>}
                </Form.Check>
              </div>
            ))}
          </Form.Row>