Question

我正在为项目使用react-contexify。

如果我只是在<ContextMenu>内部渲染孩子，一切都会很好

const onClick = ({ event, ref, data, dataFromProvider }) => console.log(event);

const MyAwesomeMenu = () => (
   <ContextMenu id='menu_id'>
     <Item onClick={onClick}>1</Item>
     <Item onClick={onClick}>1</Item>
   </ContextMenu>
);

Console返回MouseEvent，很好。

如果我使用map console内的另一个函数渲染项目，则返回空对象{}

const SingleItem = () => (
   <Item onClick={onClick}>Menu item</Item>
);

const ItemArray = () => (
  [1,2,3].map((item, index) => {
    return <SingleItem key={index} />
  })
)

const MyAwesomeMenu = () => (
   <ContextMenu id='menu_id'>
     {ItemArray()}
   </ContextMenu>
);

我不明白为什么event在这种情况下为空。

Answer 1

父组件的onClick事件将无法在子组件中隐式工作。您需要通过道具：

const onClick = ({ event, ref, data, dataFromProvider }) => console.log(event);

const MyAwesomeMenu = () => (
   <ContextMenu id='menu_id'>
     <ItemArray onClick={onClick} />
   </ContextMenu>
);

const ItemArray = (props) => (
  [1,2,3].map((item, index) => {
    return <SingleItem key={index} {...props} />
  })
)

const SingleItem = (props) => (
   <Item {...props}>Menu item</Item>
);

注意，我已经使用{...props}来传递父组件的属性，这表明它将获得父组件的所有道具。如果您只希望传递onClick道具，则可以这样传递：

onClick={props.onClick}

React在数组内丢失道具

1 个答案: