如何动态更改jsx中的react元素

Question

我想重构一些遗留代码。用例是这样的。以前有人创建了一个新组件，它基本上具有与旧组件完全相同的属性。呈现方法根据标志返回old或new，但属性值都是相同的。这将导致复制粘贴了许多冗余行。

return (
isSomeBoolTrue ? (<OriginalComponent a={a} b={b} ..... z={z} />):
(<NewComponent a={a} b={b} ..... z={z} />)
);

我想通过某种方式删除重复的属性，并使其看起来像这样:

return (isSomeBoolTrue ? (<OriginalComponent):(<NewComponent) a={a} b={b} .... />

Answer 1

您还可以尝试以下方法:

const SelectedComponent = isSomeBoolTrue ? OriginalComponent : NewComponent;
return <SelectedComponent a={a} b={b} z={z} />

Answer 2

一种选择是将props放入对象中，然后使用条件运算符将对象分散到每个组件的props中。

const propsToPassDown = { a, b, z };
return (
isSomeBoolTrue
? <OriginalComponent {...{ propsToPassDown }} />
: <NewComponent {...{ propsToPassDown }} />
);

另一种方法是使用React.createElement而不是JSX，允许您在选择要作为第一个参数传递的组件时使用条件运算符。

return React.createElement(
isSomeBoolTrue ? OriginalComponent : NewComponent,
{ a, b, z },
null
);