javascript - 你不应该使用或 withRouter() 外部动态渲染组件时

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>
          );
      }
  }

标签： javascriptreactjsreact-router

Answer 1

您不应该在已安装的应用程序中调用 ReactDom.render()。中的渲染方法Parent将处理得很好。您应该在其中设置一个状态标志，RenderComponent()或者如果您想要一个Child's 数组，请将您的组件放在 JSX 组件数组中，然后将该数组放入您的渲染方法中。

旗帜

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>
         );
    }    
}