代码之家 › 专栏 › 技术社区 › Darren

将子道具传递给Gatsby V2中的子组件

gatsby reactjs javascript

Darren · 技术社区 · 6 年前

自从升级到使用Gatsby V2后,我一直在努力通过 this.state 要用作的子组件 this.props .

例如,我有一个容器 data1 和 data2 添加到 本州 作为

class Parent extends React.Component {
constructor(props) {
    super(props);
    this.state = {
      data1: '',
      data2: ''
    };
  }

componentDidMount() {
   // Loading database
   .then(doc =>
    this.setState({
      data1: doc.data().data1,
      data2: doc.data().data2
    })
  );
}
  render() {
    const children = this.props;
    const stateAsProps = React.Children.map(children, child =>
      React.cloneElement(child, {
        data1: this.state.data1,
        data2: this.state.data2
      })
    );

    return (
        <div>{stateAsProps}</div>
    );
  }
}

以及子组件

class Child extends Component {
constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <h1>{this.props.data1}</h1>
      <p>{this.props.data2}</p>
    );
  }
}

最后,这是由

const Page = () => (
  <Parent authUserID="01234" campaignID="56789">
    <Child />
  </Parent>
);

在Gatsby V1中,这是有效的,但现在随着迁移,我收到一个错误 Uncaught Error: Objects are not valid as a React child (found: object with keys {authUserID, campaignID, children}). If you meant to render a collection of children, use an array instead.

有人能告诉我们为什么以及如何解决这个问题吗?