Реагировать JS: сделать ребенка в соответствии с полученным состоянием

Question

У меня одна страница, разделенная на две части: левая сторона - динамическая, правая - слайдер / карусель. Итак, мои компоненты: MainProfile, который является контейнером, Profile и Credit, которые должны отображаться слева (или один или другой) и MyInfo справа. Теперь я должен отобразить профиль / кредит в соответствии с состоянием, переданным в myinfo (когда ползунок равен 1, мне нужно иметь профиль в левой части, когда ползунок равен 2, мне нужно иметь кредит в левой части). Я пробовал с этим кодом, но 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) обратный вызов должен быть вызван, когда вашКарусель меняет слайд, верно? Я не вижу, как это достигается с вашей текущей реализацией