我试图找到正确的方法来定义一些组件，这些组件可以以通用的方式使用:
<Parent>
<Child value="1">
<Child value="2">
</Parent>
当然，在父组件和子组件之间呈现有一个逻辑，您可以想象<select>和<option>是这个逻辑的一个例子。
这是为了解决这个问题的一个虚拟实现:
var Parent = React.createClass({
doSomething: function(value) {
},
render: function() {
return (<div>{this.props.children}</div>);
}
});
var Child = React.createClass({
onClick: function() {
this.props.doSomething(this.props.value); // doSomething is undefined
},
render: function() {
return (<div onClick={this.onClick}></div>);
}
});
问题是无论何时使用{this.props。Children}定义一个包装器组件，如何将某些属性传递给它的所有子组件?
在我的情况下，React.cloneElement()给了我很多问题，我使用Typescript的函数组件，所以我用孩子(道具)作为一种方式来传递我的道具给我的孩子元素。同样，我的情况非常独特，我必须传递给父组件一个属性，然后基于该属性，它将某些道具传递给子组件。这可以在一个简单的CodeSandbox示例中看到
App.tsx
import "./styles.css";
import Parent from "./Parent";
export default function App() {
return (
<>
<Parent title={"With div wrapper"}>
{({ title }) => <h1>{title}</h1>}
</Parent>
<Parent>
{({ title }) => <h1>{title === undefined && "this is undefined"}</h1>}
</Parent>
</>
);
}
Parent.tsx
export interface ChildrenProps {
title?: string;
}
interface ParentWrapperProps {
children: (title: ChildrenProps) => JSX.Element;
title?: string;
}
const ParentWrapper: React.FC<ParentWrapperProps> = ({ children, title }) => {
return title ? (
<div>{children({ title: title })}</div>
) : (
<>{children({ title: undefined })}</>
);
};
export default ParentWrapper;
如果有人想知道如何在有一个或多个子节点的TypeScript中正确地做到这一点。我使用uuid库为子元素生成唯一的键属性，当然，如果只克隆一个元素，则不需要这些属性。
export type TParentGroup = {
value?: string;
children: React.ReactElement[] | React.ReactElement;
};
export const Parent = ({
value = '',
children,
}: TParentGroup): React.ReactElement => (
<div className={styles.ParentGroup}>
{Array.isArray(children)
? children.map((child) =>
React.cloneElement(child, { key: uuidv4(), value })
)
: React.cloneElement(children, { value })}
</div>
);
如您所见，此解决方案负责呈现ReactElement的数组或单个ReactElement，甚至允许您根据需要将属性传递给子组件。
我在研究类似的需求时写了这篇文章，但我觉得克隆解决方案太受欢迎了，太原始了，把我的注意力从功能上转移开了。
我在react文档《高阶组件》中找到了一篇文章
以下是我的例子:
import React from 'react';
const withForm = (ViewComponent) => {
return (props) => {
const myParam = "Custom param";
return (
<>
<div style={{border:"2px solid black", margin:"10px"}}>
<div>this is poc form</div>
<div>
<ViewComponent myParam={myParam} {...props}></ViewComponent>
</div>
</div>
</>
)
}
}
export default withForm;
const pocQuickView = (props) => {
return (
<div style={{border:"1px solid grey"}}>
<div>this is poc quick view and it is meant to show when mouse hovers over a link</div>
</div>
)
}
export default withForm(pocQuickView);
对我来说，我在实现高阶组件的模式中找到了一个灵活的解决方案。
当然，这取决于功能，但如果其他人正在寻找类似的需求，这是很好的，这比依赖于原始级别的反应代码，如克隆要好得多。
我经常使用的另一种模式是容器模式。一定要读一读，那里有很多文章。
我认为渲染道具是处理这种情况的合适方法
你可以让父组件提供子组件中使用的必要的道具，通过重构父组件代码使其看起来像这样:
const Parent = ({children}) => {
const doSomething(value) => {}
return children({ doSomething })
}
然后在子组件中，你可以这样访问父组件提供的函数:
class Child extends React {
onClick() => { this.props.doSomething }
render() {
return (<div onClick={this.onClick}></div>);
}
}
现在最终的结构是这样的:
<Parent>
{(doSomething) =>
(<Fragment>
<Child value="1" doSomething={doSomething}>
<Child value="2" doSomething={doSomething}>
<Fragment />
)}
</Parent>
