React JS：根据接收到的状态渲染子对象

Question

我有一页，分为两部分：左侧是动态的，右侧是滑块/转盘。所以我的组件是：MainProfile是容器，Profile和Credit都必须显示在左侧（或一个或另一个），而MyInfo则显示在右侧。现在，我必须根据myinfo中传递的状态来渲染Profile / Credit（当滑块为1时，我需要在左侧具有Profile，当滑块为2时，我需要在左侧具有Credit）。我已经尝试过使用此代码，但是console.log总是打印'profile'和'credit'。我哪里错了？

MainProfile.js

import React, {Component} from "react";
import { Col } from "react-bootstrap";
import './MainProfile.css';
import MyInfo from "./my-info/MyInfo";
import Profile from "./profile/Profile"
import Credit from "./profile/Credit"

class MainProfile extends Component{

    constructor(props){
        super(props)
        this.setContent = this.setContent.bind(this);
    }

    setContent(value){
        if(value===0){          
            console.log('profile')
            return <Profile></Profile>
        }
        else {
            console.log('credit')
            return <Credit></Credit>
        }
    }

    render() {  
        const Aux = props => props.children;
        return(
            <Aux>
                <Col md={7} className={"col-main-profile"}>
                    {this.setContent()||<Profile></Profile>}
                </Col>
                <Col md={4} className={"col-myinfo-main-profile"}>
                    <MyInfo setContent={this.setContent} ></MyInfo>
                </Col>
            </Aux>
        )
    }
}

export default MainProfile

MyInfo.js

import React, {Component} from "react";
import './MyInfo.css';
import { Col, Row} from "react-bootstrap";
import profile from '../../../../assets/Asset 2Profile.png';
import piggie from '../../../../assets/Asset 16pork1 Copy.png';
import Slider from "react-slick";
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

class MyInfo extends Component {

    render() {
        var settings = {
        dots: true,
        infinite: false,
        interval: false,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1
    };
    this.props.setContent(0)
    return (
        <Col className="comumn-my-info">    
            <Slider {...settings}>
                <CarouselOne></CarouselOne>
                <CarouselTwo></CarouselTwo>
            </Slider>
        </Col>
    );
  }
}
export default MyInfo;

function CarouselOne(props){

    const Aux = props => props.children;
    return(
        <Aux>
            <Row>
                <Col className={"title-my-info"}>
                    Name
                </Col>
            </Row>
            <Row>
                <Col>
                    <img
                    className="image-my-info"
                    src={profile}
                    alt="Profile"
                    />
                    <Row style={{height: "20em"}}>
                    </Row>
                </Col>
            </Row>
        </Aux>
    )
}

function CarouselTwo(props){
    const Aux = props => props.children;
    return(
        <Aux>
            <Row>
                <Col className={"title-app"} style={{left: "1.5em"}}>
                    Piggie Bank
                </Col>
            </Row>
            <Row>
                <Col>
                    <img
                    className="image-my-info"
                    src={piggie}
                    alt="Piggie Bank"
                    />
                    <Row style={{height: "20em"}}>
                    </Row>
                </Col>
            </Row>
        </Aux>
    )
}

个人资料和信用只是jsx代码。欢迎所有建议。预先感谢。

Answer 1

似乎您正在尝试根据状态值有条件地显示或隐藏组件。

您可以创建状态变量，例如showProfile

setState({showProfile:false})

然后您可以使用该状态变量有条件地显示，例如

再往下走就可以了

{this.state.showProfile?(<Profile></Profile>): (<MyInfo setContent={this.setContent} ></MyInfo>)

我不太确定为什么需要在组件中调用this.props.setContent(0)，