Question

因此，我正在使用BrowserRouter和Route根据 URL 渲染不同的组件。但是，渲染时有很多相似的标记。因此，我创建了一个Wrapper，它将组件作为道具并解决了这个问题！

class Wrapper extends React.Component {
    componentDidMount() {
        this.props.setActiveTab(this.props.activeTab);
        console.log('Wrapper props: ', this.props)
    }

    render() {
        const OtherComponent = this.props.otherComponent

        return (
            <Row>
                <Col md='8' id='content-block'>
                    <SwitchTab />
                </Col>
                <Col md='4' id='info-block'>
                    <InfoComponent info={this.props.info} {...this.props}/>
                    {
                        this.otherComponent &&
                        <OtherComponent {...this.props}/>
                    }
                </Col>
            </Row>
        )
    }
}

以下是一些路线：

<Route 
    exact 
    path='/r/all/' 
    render={() =>
        <Wrapper 
            setActiveTab={context.toggleTab} 
            activeTab={'3'} 
            info='all'
        />
    }
/>
<Route 
    exact 
    path='/u/:username/' 
    render={(props) => {
        return (
            <Wrapper 
                setActiveTab={context.toggleTab} 
                activeTab={'4'}
                info='user'
                user={props.match.params.username}
                otherComponent={Profile}
                username={props.match.params.username}
            />
            // <Profile username={props.match.params.username} />
        )
    }}
/>
<Route
    exact
    path='/r/:subreddit/'
    render={(props) => {
        return (
            <Wrapper 
                setActiveTab={context.toggleTab} 
                activeTab={'4'} 
                info='subreddit'
                otherComponent={Subreddit}
                subreddit={props.match.params.subreddit}
            />
            // <Subreddit subreddit={props.match.params.subreddit} />
        )
    }}
/>

otherComponent没有得到渲染。我不知道问题出在哪里。另外，如果还有其他更好的方法，请说明。

Answer 1

您正在检查this.otherComponent是否真实，然后再渲染。您只想检查OtherComponent是否真实。

{OtherComponent && <OtherComponent {...this.props} />}

如果愿意，还可以将Wrapper更改为渲染children。

示例

class Wrapper extends React.Component {
  componentDidMount() {
    this.props.setActiveTab(this.props.activeTab);
    console.log("Wrapper props: ", this.props);
  }

  render() {
    const { children, ...restProps } = this.props;
    return (
      <Row>
        <Col md="8" id="content-block">
          <SwitchTab />
        </Col>
        <Col md="4" id="info-block">
          <InfoComponent {...restProps} />
          {children}
        </Col>
      </Row>
    );
  }
}

// Usage
<Wrapper>
  <OtherComponent />
</Wrapper>

Answer 2

viewPortItems

快速浏览this.otherComponent && <OtherComponent {...this.props}/>尚未定义，因此该组件不会被渲染，应为this.otherComponent ??

Reactjs-组件作为道具

2 个答案: