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

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

是的，您需要添加参数“props”来形成组件并在显示 {props.children} 上输出：

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

CodeSanbox demo

Answer 2

您可以使用children prop 来实现此目的。

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

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

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

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

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