无法在基于反应类的组件中安装组件

Question

我正在使用 react 16.8 我使用钩子和功能组件制作了一个项目，现在我试图将它变成基于类的组件，但没有安装一个组件。在 app.js 中，我在 componentDidUpdate 中获取数据，它工作正常，没有问题。Element.js 还渲染组件并创建链接 onclick 我正在更新状态并通过传递不起作用的道具来调用弹出组件。应用程序.jsimport React, { Component } from 'react';import './App.css';import axios from 'axios';import Element from './components/Element';class App extends Component {  constructor(props) {    super(props);    this.state = { elements: [] };  }  componentDidMount() {    const res = async () => {      const result = await axios.get('/data');      const data = result.data;      this.setState({ elements: data });    };    res();  }  render() {    return (      <div className='wrapper'>        <div id='table'>          {this.state.elements.map(element => (            <Element elements={element} key={element._id} />          ))}        </div>      </div>    );  }}export default App;在 Element.js 中，我为所有元素创建链接并创建路由部分。Onclick 使 showpopup 为 true 并将道具传递给 popup。当弹出窗口在路由之外被调用时，它正在工作。但是在每个组件上点击我必须传递不同的道具并显示相同的弹出窗口。 元素.jsimport React, { Component } from 'react';import {  BrowserRouter as Router,  Redirect,  Route,  Link} from 'react-router-dom';import Popup from './Popup';class Element extends Component {  constructor(props) {    super(props);    this.state = { showPopup: false };  }  handleClick = () => {    this.setState({ showPopup: !this.state.showPopup });  };    

Answer 1

您提供的路径只是一个字符串，因此将其更改为如下所示的表达式。

<Route

  exact

  path={`/:${this.props.elements.name}`}

  component={props => <Popup element={this.props.elements} />}

/>;

Answer 2

从这个链接（https://tylermcginnis.com/react-router-pass-props-to-components）：

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

所以你的行 element.js 必须是

 render={props => <Popup element={this.props.elements} />}

而不是这个。

 component={props => <Popup element={this.props.elements} />}

此外，路径必须更正为：

路径={ /:${this.props.elements.name}}

Answer 3

这是错误的部分。

 path='/:this.props.elements.name'

它应该如下所示：

 path={`/:${this.props.elements.name}`}