Question

我正在尝试将prop传递给子组件以进行响应，但是当我控制台记录它时，它根本没有显示在props中。甚至键things也不会显示。任何帮助，将不胜感激。

export default class Child extends Component {

  constructor(props) {
        super(props);
        console.log(props)
    }

  render() {
    console.log(this.props)
    return (
        <div>
          Test
        </div>
    );
  }
}


class Parent extends Component {
  constructor(props) {
      super(props);
  }

  render() {
    return (
      <div>
        <Router>
          <div>
            <Route path='/testing' things="yes" component={Child} />
          </div>
        </Router>
      </div>
    );
  }
}
}

const connectedParent = connect()(Parent);
export { connectedParent as Parent };

Answer 1

在您的父级组件中，将Route替换为以下内容，

<Route
  path='/testing'
  render={(props) => <Child {...props} things="yes" />}
/>

让我知道它是否有效。

说明：当您使用<Route path='/testing' things="yes" component={Child} />时，您没有将道具传递给Child组件，而是传递给Route组件，并且忽略了它。

将道具传递给Route中子组件的另一种方法是：

<Route
  path='/testing'
  component={() => <Child things="yes" />}
/>

但是使用方法，您将丢失Route道具，例如位置，历史记录以及其他道具，并且根据文档：

当您使用组件道具时，路由器使用React.createElement从给定组件中创建一个新的React元素。这意味着，如果向component属性提供内联函数，则将在每个渲染中创建一个新组件。这将导致现有组件的卸载和新组件的安装，而不仅仅是更新现有组件。

所以我们剩下的是我建议的方法，即

<Route
      path='/testing'
      render={(props) => <Child {...props} things="yes" />}
    />

在这里，您将诸如道具之类的道具传递给Child组件本身，而不是传递给route，并且Route的render方法提供Route道具。因此，请始终记住将其道具传递为{... props}，以便您可以在“子”组件中访问“路线”道具，并且在“路由”时不会遇到任何问题。

将道具传递给子组件问题

1 个答案: