具有相同状态/功能但 UI 不同的两个组件

Question

我有两个组件，它们采用完全相同的道具并共享完全相同的方法。 但它们具有不同的 UI。 您建议如何保持干燥？我的第一个想法：

1. 创建一个具有 onClick 方法和 props/state 的包装器组件。
2. 创建两个 UI 组件，用于接收 props/状态，然后根据需要进行渲染，例如：

<Wrapper>
<UIComponent-1 />
</Wrapper>
<Wrapper>
<UIComponent-2 />
</Wrapper>

有没有更好的方法可以做到这一点？我正在考虑使包装器成为 HOC，但随后需要复制 onClick 功能(或从某个通用文件导入(。

Answer 1

您可以将组件拆分为多个组件。让一个组件充当 API/接口，定义可以使用的道具，并有一个render道具，该道具将接收您想要在特定情况下渲染的表示组件

Answer 2

下面是 Andy McCullough 答案的示例实现。

此示例创建一个组件，该组件保存可通过调用reverse函数反转的字符串。然后，value和reverse函数都提供给 render 属性。然后，您可以决定如何将函数附加到 DOM(如果有的话(以及值的显示位置和方式。

我还添加了一个默认的render属性，但如果您没有默认方案，则可以省略。

提供给render的函数目前是匿名函数，但如果你想重用它们，你可以将它们存储在变量中或导出它们。

const {Fragment, useState} = React;
const {Alert, Button} = ReactBootstrap;
const defaultRender = ({value, reverse}) => <span onClick={reverse}>{value}</span>;
function Reversible({initialValue = "", render: Render = defaultRender}) {
const [value, setValue] = useState(initialValue);
const reverse = () => setValue(value => value.split("").reverse().join(""));
return <Render value={value} reverse={reverse} />;
};
ReactDOM.render(
<Fragment>
<Reversible initialValue="default render" />
<Reversible
initialValue="custom Alert render"
render={({value, reverse}) => (
<Alert variant="primary" onMouseEnter={reverse} onMouseOut={reverse}>
{value}
</Alert>
)}
/>
<Reversible
initialValue="custom Button render"
render={({value, reverse}) => (
<Button onClick={reverse}>{value}</Button>
)}
/>
</Fragment>,
document.getElementById("root")
);

<link rel="stylesheet" crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"></script>
<div id="root"></div>

Answer 3

你可以有一个常用方法的自定义钩子，然后在函数组件中调用钩子。看起来您的问题已被指定 https://reactjs.org/docs/hooks-effect.html。

举个例子

const useCustomHook = (someArgs) => {
// perform some effects
return value;
}
// Then your component
const Component = (props) => {
const value = useCustomHook(someArgs);
return <div></div>
}

我希望它有所帮助。