将道具传递给子组件问题[重复]

Question

我试图传递一个道具给一个子组件在反应，但它不显示在所有的道具，当我控制台日志。甚至关键的东西也不显示。对此的任何帮助都将不胜感激。

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
  path='/testing'
  render={(props) => <Child {...props} things="yes" />}
/>

让我知道它是否有效。

说明：当你使用

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

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

但是使用方法，你会失去路线道具，如位置、历史和其他道具，也根据文档：

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

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

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

在这里，您将向子组件本身传递类似的道具，而不是路由，并且路由的渲染方法也提供路由道具。所以请始终记住将它作为{…props}传递，这样您就可以访问子组件中的路由道具，并且在路由时不会遇到任何问题。