是否可以將組件放入組件中？

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>
  )
}