我是一个非常活跃的 Dash 用户，我开始发现 Dash 使用中存在很多限制，并且我意识到有关如何将组件转换为 Dash 的信息/内容绝对有限，并且示例过时且非常简单......并且我对 Javascript 或 React 几乎没有任何了解，我完全不知道如何转换组件。
我正在尝试将响应式网格布局组件从react.js 转换为Plotly Dash，但我不知道在这种情况下应该如何处理这些属性？
组件链接：https://github.com/STRML/react-grid-layout/blob/master/lib/ResponsiveReactGridLayout.jsx https://github.com/STRML/react-grid-layout/blob/master/lib/ResponsiveReactGridLayout.jsx
由于我没有使用 React.js 的经验，我很困惑应该做什么修改才能将此组件转换为 Plotly Dash。
对于上面的组件，我应该只在 Proptypes 上声明 Properties（如下所示）还是需要做更多修改？
ResponsiveReactGridLayout.propTypes{
//
// Basic props
//
className: PropTypes.string,
style: PropTypes.object,
// This can be set explicitly. If it is not set, it will automatically
// be set to the container width. Note that resizes will *not* cause this to adjust.
// If you need that behavior, use WidthProvider.
width: PropTypes.number,
// If true, the container height swells and contracts to fit contents
autoSize: PropTypes.bool,
// # of cols.
cols: PropTypes.number,
// A selector that will not be draggable.
draggableCancel: PropTypes.string,
// A selector for the draggable handler
draggableHandle: PropTypes.string,
// Deprecated
verticalCompact: function (props: Props) {
if (
props.verticalCompact === false &&
process.env.NODE_ENV !== "production"
) {
console.warn(
// eslint-disable-line no-console
"`verticalCompact` on <ReactGridLayout> is deprecated and will be removed soon. " +
'Use `compactType`: "horizontal" | "vertical" | null.'
);
}
},
// Choose vertical or hotizontal compaction
compactType: PropTypes.oneOf(["vertical", "horizontal"]),
// layout is an array of object with the format:
// {x: Number, y: Number, w: Number, h: Number, i: String}
layout: function (props: Props) {
var layout = props.layout;
// I hope you're setting the data-grid property on the grid items
if (layout === undefined) return;
require("./utils").validateLayout(layout, "layout");
},
//
// Grid Dimensions
//
// Margin between items [x, y] in px
margin: PropTypes.arrayOf(PropTypes.number),
// Padding inside the container [x, y] in px
containerPadding: PropTypes.arrayOf(PropTypes.number),
// Rows have a static height, but you can change this based on breakpoints if you like
rowHeight: PropTypes.number,
// Default Infinity, but you can specify a max here if you like.
// Note that this isn't fully fleshed out and won't error if you specify a layout that
// extends beyond the row capacity. It will, however, not allow users to drag/resize
// an item past the barrier. They can push items beyond the barrier, though.
// Intentionally not documented for this reason.
maxRows: PropTypes.number,
//
// Flags
//
isBounded: PropTypes.bool,
isDraggable: PropTypes.bool,
isResizable: PropTypes.bool,
// If true, grid items won't change position when being dragged over.
preventCollision: PropTypes.bool,
// Use CSS transforms instead of top/left
useCSSTransforms: PropTypes.bool,
// parent layout transform scale
transformScale: PropTypes.number,
// If true, an external element can trigger onDrop callback with a specific grid position as a parameter
isDroppable: PropTypes.bool,
// Resize handle options
resizeHandles: resizeHandlesType,
resizeHandle: resizeHandleType,
//
// Callbacks
//
// Callback so you can save the layout. Calls after each drag & resize stops.
onLayoutChange: PropTypes.func,
// Calls when drag starts. Callback is of the signature (layout, oldItem, newItem, placeholder, e, ?node).
// All callbacks below have the same signature. 'start' and 'stop' callbacks omit the 'placeholder'.
onDragStart: PropTypes.func,
// Calls on each drag movement.
onDrag: PropTypes.func,
// Calls when drag is complete.
onDragStop: PropTypes.func,
//Calls when resize starts.
onResizeStart: PropTypes.func,
// Calls when resize movement happens.
onResize: PropTypes.func,
// Calls when resize is complete.
onResizeStop: PropTypes.func,
// Calls when some element is dropped.
onDrop: PropTypes.func,
//
// Other validations
//
droppingItem: PropTypes.shape({
i: PropTypes.string.isRequired,
w: PropTypes.number.isRequired,
h: PropTypes.number.isRequired
}),
// Children must not have duplicate keys.
children: function (props: Props, propName: string) {
var children = props[propName];
// Check children keys for duplicates. Throw if found.
var keys = {};
React.Children.forEach(children, function (child) {
if (keys[child.key]) {
throw new Error(
'Duplicate child key "' +
child.key +
'" found! This will cause problems in ReactGridLayout.'
);
}
keys[child.key] = true;
});
},
// Optional ref for getting a reference for the wrapping div.
innerRef: PropTypes.any
};
非常欢迎任何帮助或参考...
问候，
列奥纳多
