我想在反应中创建一个带有子组件的自定义表，但我无法实现
这是我的代码
import React from 'react';
const DataTableContext = React.createContext();
const Header = () => {
return (
<DataTableContext.Consumer {...props}>
<thead>{props.children}</thead>
</DataTableContext.Consumer>);
}
const Row = (props) => {
return (
<DataTableContext.Consumer>
<tr>{props.children}</tr>
</DataTableContext.Consumer>);
}
const Cell = (props) => {
return (
<DataTableContext.Consumer>
<td style={{ width: props.width }}>{props.children}</td>
</DataTableContext.Consumer>);
}
const Body = (props) => {
return (
<DataTableContext.Consumer>
<tbody>{props.children}</tbody>
</DataTableContext.Consumer>);
}
const DataTable = props => {
return (
<DataTableContext.Provider {...props}>
<table className="bordered">{props.children}</table>
</DataTableContext.Provider>
);
}
DataTable.Header = Header;
DataTable.Row = Row;
DataTable.Cell = Cell;
DataTable.Body = Body;
export default DataTable
有什么办法可以解决我的问题吗？我还参考了以下文章：https : //medium.com/maxime-heckel/react-sub-components-part-2-using-the-new-context-api-6f1c089acfe4
正确的使用方法Context.Consumer，Cell举个例子：
const Cell = ({ width, children }) => (
<DataTableContext.Consumer>
{(value) => <td style={{ width }}>{children}</td>}
</DataTableContext.Consumer>
);
我建议你useContext不要Consumer这样使用：
const Cell = ({ width, children }) => {
const context = useContext(DataTableContext);
return <td style={{ width }}>{children}</td>;
};
Context如果您只想自定义表而不传递数据，则不需要API。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句