React:呈现具有一组依赖于所选值的字段的表单

Question

这里是一个例子：https://codesandbox.io/s/priceless-brown-ib4w6

import React from "react";
import "./styles.css";
const MyForm = (props) => {
return React.Children.map(props.children, (element) => {
return element && <div>Addon: {element}</div>;
});
};
const MyComponentA = (props) => {
return (
<>
<span>Component A-1</span>
<span>Component A-2</span>
</>
);
};
const MyComponentB = (props) => {
return (
<>
<span>Component B-1</span>
<span>Component B-2</span>
</>
);
};
export default function App() {
const [type, setType] = React.useState("a");
const handleChange = (e) => {
setType(e.target.value);
};
return (
<div className="App">
<MyForm>
<select onChange={handleChange}>
<option name="A" value="a">
A
</option>
<option name="B" value="b">
B
</option>
</select>
<span>Text1</span>
<span>Text2</span>
{type === "a" && <MyComponentA />}
{type === "b" && <MyComponentB />}
</MyForm>
</div>
);
}

有一种形式会在它的每个子对象上添加一些包装。还有一个选择字段，用于修改渲染表单字段的子集。MyComponents旨在将这些更改的部件分组。但这打破了作为MyForm一部分的最后一个MyComposents孩子。请考虑MyForm是第三方代码，不能更改。如何正确地组织这样的代码，达到正确的渲染，同时保持字段组？

目标是获得：

Addon: Text1
Addon: Text2
Addon: Component A-1
Addon: Component A-2

而不是：

Addon: Text1
Addon: Text2
Addon: Component A-1Component A-2

Answer 1

问题是MyForm只循环通过它的直接子级，并将它们包装在AddOndiv中。在您的情况下，直接子级是MyComponentA和MyComponentB。它们是子级，而不是MyForm的直接子级，因此整个组件都封装在AddOn分区中。

您可以将这些组件更改为简单的元素阵列，如

更改

const MyComponentA = (props) => {
return (
<>
<span>Component A-1</span>
<span>Component A-2</span>
</>
);
};

至

const MyComponentB = [<span>Component B-1</span>, <span>Component B-2</span>];

然后，当在应用程序中渲染它们时，只需传入该值(而不是作为反应组件(

更改

{type === "a" && <MyComponentA />}
{type === "b" && <MyComponentB />}

至

{type === "a" && MyComponentA}
{type === "b" && MyComponentB}

希望这对有帮助