Question

You should not use <Route> or withRouter() outside a <Router>

在错误输出行上突出显示“ ReactDOM.render ...”。

该错误仅在调用函数ReactDOM.render()

时发生

render()中的呈现组件效果很好。

  --- Parent.js ---
  import Child from './Child';

  export class Parent extends Component {    
        renderComponent() {
            ReactDOM.render(<Child />, 'id').
        }

        render() {  
           return (
              <div>
                  <button onClick={() => this.renderComponent()}/>  // error when clicked 
                  <Child />  // works fine
                  <div id="id"></div>
              </div>
             );
        }    
  }

  --- Child.js ---
  class Child extends Component {          
        render() {  
           return <button onClick={() => this.props.history.push('/')}/>;
        }    
  }
  export default withRouter(Child);

  --- App.js ---   
  export default class App extends Component {
      render() {
          return (
              <BrowserRouter>
                  <Route path="/parent" component={Parent} />
                  <Route exact path="/" component={Home} />
              </BrowserRouter>
          );
      }
  }

Answer 1

您不应在已安装的应用程序内调用ReactDom.render（）。 Parent中的render方法可以很好地解决这个问题。您应该在RenderComponent()中设置一个状态标志，或者如果您想要一个Child的数组，请将您的组件放在JSX组件数组中，然后将该数组放在render方法中。

标志

export class Parent extends Component {    

    render() {  
       return (
          <div>
              <button onClick={() => this.setState({showChild: true})}/> 
              <Child />  // works fine
              <div id="id"> {this.state.showChild && <Child />} </div>
          </div>
         );
    }    
}

动态呈现组件时，不应在<router>外使用<route>或withRouter（）

1 个答案: