Reactjs - 作為道具的組件

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

另一個組件沒有得到渲染。 我不知道問題出在哪里。 如果還有其他更好的方法，請說明。

Answer 1

您正在檢查this.otherComponent在呈現之前是否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

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

快速看一下， this.otherComponent沒有定義所以組件沒有得到渲染，應該是this.props.otherComponent ??