具有不同道具的 React 组件的多个实例无法正常工作

Question

尽管为它们使用了不同的键值，但我还是难以处理多个组件实例。比如我做2个简单的页面，传递不同的props。但是，只有其中一个会记录或发出警报。不应该是来自每个组件的一条消息及其道具吗？我在这里错过了什么？

class Temp_page extends Component {
  constructor(props) {
      super(props);   
      console.log("props", props)
      alert("this.props.tag" + this.props.tag);    
  }
  render() {
    return ( <div id={this.props.tag}> {this.props.tag} </div>);
  }
}

路线：

      <Route key="11" path="/temp_1" element = {
        <Temp_page tag={"temp_1"}/>
      }/>     

      <Route key="22" path="/temp_2" element = {
        <Temp_page tag={"temp_2"}/>
      }/>

Answer 1

这是意料之中的。来自 react-router 的 Route 组件被设计成只呈现匹配的路由。其他人根本不渲染。

当您执行 element = {<Temp_page tag={"temp_1"}/>} 时，不会立即调用 Temp_page 的构造函数。它只是创建一个元素；换句话说，一个描述页面那部分应该是什么样子的小对象。 <Route> 然后检查 url。如果 url 匹配，<Route> 将 return 您要求它呈现的元素，然后 React 将挂载组件，调用其构造函数。相反，如果 url 不匹配，则 <Route> return 为空。该元素最终未被使用。

具有不同道具的 React 组件的多个实例无法正常工作

Multiple instances of react component with different props doesn't work properly

javascript

reactjs

react-router

react-native