Question

我正在编写一个小部件库，我想给用户使用他们自己的布局的灵活性。例如，我有一个[x₁, x₂, x₃, y₁, y₂, …, y_n]小部件，该小部件负责跟踪点的当前位置。这是Tracker

的使用概述

Tracker

这很好，但是我想为库的用户提供额外的灵活性以添加自定义布局，以便他们可以将Tracker组件放置在所需的位置。像这样：

<Tracker initialPos={[0,0]}> //<-- holds state of current position
    <TrackerPlot option={1} />
    <TrackerPlot option={2} />
    <TrackerPlot option={3} />
    ...
    <TrackerPlot option={n} />
    <TrackerControls />
</Tracker>

问题是我一直在使用儿童道具，如下所示：

<Tracker initialPos={[0,0]}>
  <div class="USER-DEFINED-LAYOUT-PLOTS">
    <TrackerPlot val={1} />
    <TrackerPlot val={2} />
    <TrackerPlot val={3} />
    ...
    <TrackerPlot val={n} />
  </div>
  <div class="USER-DEFINED-LAYOUT-CONTROLS">
    <TrackerControl />
  </div>
</Tracker>

如果我可以灵活地添加周围的function Tracker(props){ const [pos, setPos] = useState(props.initialPosition); const children = React.Children.map(props.children, child=>{ return React.cloneElement(child, { pos:pos }); }); return {children}; }，则上述访问子级的代码将中断。 是否存在一种模式/工具/设计，允许用户使用子组件定义自己的布局

Answer 1

这是context api的经典用法，您的父母将是提供者，而您的孩子将是消费者。

// PosContext.jsx
export const PosContext = React.createContext({
  pos: initialPosition
});


//Tracker.jsx
import {PosContext} from './PosContext';

export const Tracker = ({ initialPos, children }) => (
  <PosContext.Provider value={{ pos: initialPos }}>{children}</PosContext.Provider>
);


// TrackerPlot.jsx
import { PosContext } from './PosContext';

export const TrackerPlot = props => (
  <PosContext.Consumer>{({ pos }) => <div>{pos}</div>}</PosContext.Consumer>
);

React-子组件的自定义布局

1 个答案: