Question

我有一个名为JourneyTripComponent的react组件。我想在不需要渲染该组件内部的Row元素的页面中使用它。

 <Container>
          <Row>
            <CustomColumn sm={8}  padding={"20px 0px 5px 0px"} >
              <Text size={2} color={"#4A494B"} >
                {intl.formatMessage(messages.subHeader)}
              </Text>
            </CustomColumn>
          </Row>
        </CustomColumn>
      </Row>
     </Container>

我想用subHeader渲染行。我知道我需要为我的道具添加一些条件，但是还不确定如何对Reactjs做到这一点。有什么帮助吗？

Answer 1

您可以传递类似props.showSubHeader的内容，并且在渲染时，如果Row为subHeader，则仅显示props.showSubHeader和true。

...
{props.showSubHeader && 
  <Row>
    <CustomColumn sm={8}  padding={"20px 0px 5px 0px"} >
      <Text size={2} color={"#4A494B"} >
         {intl.formatMessage(messages.subHeader)}
      </Text>
    </CustomColumn>
  </Row>}

Answer 2

您可以执行以下操作。

假设您的JourneyTripComponent组件（如您的问题所述）为

请注意添加到this.props.showHeader的'<Row>'

export class JourneyTripComponent extends React.Component{
  render(){
    return(
      <Container>
      <Row spacing={"40px"} >
        <CustomColumn sm={12} padding={"20px 0px 40px 0px"}>
          <Row className="justify-content-between" >
            <Text size={3.5} color={"#4A494B"} inline >
              {intl.formatMessage(messages.header)}
            </Text>
            <MediaQuery query="(min-width: 768px)">
              {
                this.props.home ? <Anchor
                  size={1.6}
                  color="#79C142"
                  padding={"10px 0px 0px 0px"}
                  to="about-us"
                  inline
                >
                  {intl.formatMessage(homeMessage.section4_learnMore)} <LearnMoreIcon />
                </Anchor>
                  : null
              }
            </MediaQuery>
          </Row>
          {this.props.showHeader && <Row>
            <CustomColumn sm={8}  padding={"20px 0px 5px 0px"} >
              <Text size={2} color={"#4A494B"} >
                {intl.formatMessage(messages.subHeader)}
              </Text>
            </CustomColumn>
          </Row>}
        </CustomColumn>
      </Row>
     </Container>
    )
  }
}

您可以在父组件中将此组件用作

export class MyParentComponent extends React.Component{

render(){
  return(
    <JourneyTripComponent showHeader={false} />
  )
 }
}

在React.js中有条件地渲染不同的元素

2 个答案: