是否可以将组件放入组件中？

Question

我制作了一个我想重用的Form组件，我还制作了一个我想重用的Submit组件。 是否可以将Submit组件放在Form组件中？

export const Form = () => {
    return (
        <form>
            
        </form>
    )
}

提交.js

export const Submit = () => {
    return (
        <>
           <input type="submit">
        </>
    )
}

测验.js

export const Quiz = () => {
    return (
        <Form>
            <Submit>
        </Form>
    )
}

Answer 1

您可以使用children道具来实现这一点。

基本上，在您的 Form.js 中，使用props.children

export const Form = (props) => {
    return (
        <form>
            {props.children}
        </form>
    )
}

然后在您的Quiz.js中，像这样使用它。

export const Quiz = () => {
    return (
        <Form>
           <Submit />
        </Form>
    )
}

<Submit />组件现在将在您的Form组件中呈现

Answer 2

是的，您需要在显示 {props.children} 上添加参数“props”以形成组件和 output：

const Form = (props) => {
  return (
      <form>
          {props.children}
      </form>
  )
}