英文:
how to put component as a children in reactjs?
问题
我有三个组件。首先是FormTemplate，其中子组件作为props传递进来，包括FormRender，它有两个props，FormTemplate和formSection。我试图将formSection放在FormTemplate内部，但它不起作用。
当前输出
Form Template
Form Template End
section
期望输出
Form Template
section
Form Template End
请问你如何实现这个目标？
这是我的代码：
https://codesandbox.io/s/elegant-elbakyan-j429zl?file=/src/App.js:0-505
import "./styles.css";
function FormTemplate({ children }) {
return (
<>
<div>Form Template</div>
<div>{children}</div>
<div>Form Template End</div>
</>
);
}
function FormRender({ formTemplate, formSection }) {
return (
<>
{formTemplate}
{formSection}
</>
);
}
export default function App() {
return (
<div>
<FormRender
formTemplate={<FormTemplate />}
formSection={<section>section</section>}
/>
</div>
);
}
希望这能帮助你实现你的目标。
英文:
I have three components . First one FormTemplate in which children come as a props.FormRender which have two props FormTemplate ,formSection.I am trying to put formSection inside FormTemplate. but it is not working
current output
Form Template
Form Template End
section
Expected output
Form Template
section
Form Template End
can you please help how to achieve this
here is my code
https://codesandbox.io/s/elegant-elbakyan-j429zl?file=/src/App.js:0-505
import "./styles.css";
function FormTemplate({ children }) {
return (
<>
<div>Form Template</div>
<div>{children}</div>
<div>Form Template End</div>
</>
);
}
function FormRender({ formTemplate, formSection }) {
return (
<>
{formTemplate}
{formSection}
</>
);
}
export default function App() {
return (
<div>
<FormRender
formTemplate={<FormTemplate />}
formSection={<section>section</section>}
/>
</div>
);
}
答案1
得分: 1
你可以传递组件定义：
formTemplate={FormTemplate}
然后，在你的渲染器中，将组件用作 JSX。您需要确保将组件的首字母大写，以便 React 将其视为自定义组件，我已经通过 解构并提供一个新的变量名 (: FormTemplateComponent) 来完成：
function FormRender({ formTemplate: FormTemplateComponent, formSection }) {
return (
<FormTemplateComponent>
{formSection}
</FormTemplateComponent>
);
}
英文:
You can instead pass the component definition:
formTemplate={FormTemplate}
then, within your renderer, use the component as JSX. You need to ensure you give the component a capital letter so that React sees it as a custom component, which I've done below by destructuring and providing a new variable name (: FormTemplateComponent):
function FormRender({ formTemplate: FormTemplateComponent, formSection }) {
return (
<FormTemplateComponent>
{formSection}
</FormTemplateComponent>
);
}
答案2
得分: 0
将formSection组件作为FormTemplateComponent的子元素呈现。
function FormRender({ formTemplate: FormTemplateComponent, formSection }) {
return (
<div>
<FormTemplateComponent>
{formSection}
</FormTemplateComponent>
</div>
);
}
在整个应用程序中组合：
import React from "react";
import "./styles.css";
function FormTemplate({ children }) {
return (
<>
<div>表单模板</div>
<div>{children}</div>
<div>表单模板结束</div>
</>
);
}
function FormRender({ formTemplate: FormTemplateComponent, formSection }) {
return (
<div>
<FormTemplateComponent>
{formSection}
</FormTemplateComponent>
</div>
);
}
export default function App() {
return (
<div>
<FormRender
formTemplate={FormTemplate}
formSection={<section>部分</section>}
/>
</div>
);
}
这是你提供的代码的翻译部分。
英文:
Render the formSection component as a child inside the FormTemplateComponent.
function FormRender({ formTemplate: FormTemplateComponent, formSection }) {
return (
<div>
<FormTemplateComponent>
{formSection}
</FormTemplateComponent>
</div>
);
}
Putting it together in the entire App:
import React from "react";
import "./styles.css";
function FormTemplate({ children }) {
return (
<>
<div>Form Template</div>
<div>{children}</div>
<div>Form Template End</div>
</>
);
}
function FormRender({ formTemplate: FormTemplateComponent, formSection }) {
return (
<div>
<FormTemplateComponent>
{formSection}
</FormTemplateComponent>
</div>
);
}
export default function App() {
return (
<div>
<FormRender
formTemplate={FormTemplate}
formSection={<section>section</section>}
/>
</div>
);
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论