XMasonry，XBlock（react-xmasonry）使用单独的组件：TypeError：this.props.parent未定义

Question

我正在尝试使用npm modul react-xmasonry。当我实现XMasonry时，XBlock在一个组件中，一切都很好。但是当我尝试将它们分成两个组件时，我得到了错误：

<t>组件位于XBlock组件中的某个位置

The above error occurred in the <t> component:
    in t (created by Message2)
    in Message2 (created by GridListPost1)
    in div (created by t)
    in t (created by GridListPost1)
    in GridListPost1 (created by Channel)
    in div (created by Channel)
    in div (created by Channel)
    in Channel (created by Connect(Channel))
    in Connect(Channel) (created by RouterContext)
    in div (created by App)
    in div (created by App)
    in App (created by Connect(App))
    in Connect(App) (created by RouterContext)
    in RouterContext (created by Router)
    in Router
    in Provider

TypeError: this.props.parent is undefined

最小的例子：

import { XMasonry } from "react-xmasonry";
import Message2 from '../message/Message2'

export default class GridListPost1 extends Component {

  render() {

    const {items} = this.props;

    return (
        <XMasonry>
          {items.map(message => (
            <Message2 key={message.id} message={message}/>
          ))}
        </XMasonry>
    )
  }
}


import { XBlock } from "react-xmasonry";

export default class Message2 extends Component {

  render() {

    const {message} = this.props;

    return (
        <XBlock key={message.id}>
          <div className="card">
                <h1>Wide Card</h1>
                <p>Put any wide text here!</p>
            </div>
        </XBlock>
    )
  }
}       

Answer 1

您需要向Message2添加密钥，以修复警告

     {items.map(message => (
        <Message2 key={message.id} message={message}/>
      ))}

或者，如果您的项目不包含ID，则将索引添加为键，如下所示

    {items.map((message, i) => (
        <Message2 key={i} message={message}/>
      ))}