3

Buen día. Estoy realizando una pagina web con react, hay un div padre en donde tengo dos botones y cada uno cambia cada div hijo ahí el ejemplo:

ejemplo

en mi código:

import React, { Component } from "react"
import Facial from "../FacialRecognition"
import ObjectD from "../ObjectDetection"
import Form from "../Form"
import Footer from "../footer"
import Nav from "./Nav"

class Technologies extends Component {
  render() {
    return (
      <div>
        <Nav />
        <div className="section-66">
          <div className="div-block-311">
            <div className="div-block-113">
              <p className="paragraph-14 title">
                Spot technologies. <b>intelligence artificial made simple</b>
              </p>
              <p className="paragraph-151">
                Our technology provides you different options specialized in your
                needs
            </p>
              <div className="button">
                <button onClick={() => window.location.href = "/features"} className="btn-1">SEE ALL FEAUTURES</button>
              </div>
            </div>
          </div>
          <div className="div-block-312">
            <img src={require("../../assets/img/vision.svg")} alt=""/>
          </div>
        </div>
        <div className="div-block-83">
          <div className="section-77">
            <button className="btnT _1">FACIAL RECOGNITION</button>
            <button className="btnT">OBJECT DETECTION</button>
          </div>
          <div className="section-88">
            <ObjectD />
          </div>
        </div>
        <div className="section-91">
          <Form />
        </div>
        <Footer />
      </div>
    )
  }
}

export default Technologies

Los div hijos los tengo como componentes para solo mandarlos a llamar, lo que deseo hacer es que al momento de apretar un botón aparezca un div hijo y al apretar el otro botón aparezca el otro div hijo y desaparezca el anterior, me dijeron que ocupara switch true false pero no encuentro un ejemplo o una explicación en si que me ayude hacer esto.

5
  • Hola Daniel, lee sobre cómo crear un ejemplo mínimo verificable y edita tu pregunta para añadir un ejemplo de código más completo. El código compartido deja fuera partes que podrían ser importantes para solucionar el problema.
    – Alvaro Montoro
    Commented el 22 abr. 2019 a las 23:02
  • estas usando react hooks o react components? no veo ese DOM dentro de algun return Commented el 23 abr. 2019 a las 14:37
  • @BlackHole react componets, ahorita no he realizado ningun codigo por que ando perdido en eso, solo lo he maquetado y puesto los dos botones y los dos div que quiero que se muestren y oculten con cada boton
    – DGomez
    Commented el 23 abr. 2019 a las 14:48
  • usa el state de react, que cada click al botton el estado con this.setState(), y ahi pones el switch o if en el dom con los componentes Commented el 23 abr. 2019 a las 14:58
  • 1
    @BlackHole gracias me funciono con el Switch y el this.setState()
    – DGomez
    Commented el 23 abr. 2019 a las 16:48

1 respuesta 1

0

Entiendo lo que quieres hacer, de casualidad en estos días me tropecé con un problema muy similar.

No cuento con lo necesario en tu código como para elaborarte una respuesta adecuada, pero sí te puedo adjuntar un ejemplo de cómo solucioné ese problema en mi proyecto.

Lo que hice fue poner el componente a mostrar en el state e irlo cambiando según el componente a mostrar en determinado momento. Luego en el lugar donde quiero mostrar el componente simplemente llamo a esa propiedad del state. Adjunto debajo el código de mi componente y con los comentarios puntuales, no dudes en comentar ante cualquier duda.

import React, { Component } from 'react';
import { Layout, Menu, Breadcrumb, Icon } from 'antd';
import { GlobalStyleLayout } from './Styles';
import IconsLayout from './IconsLayout';
import Users from './Users';//este es un componente
import Register from './Register';//este es el otro componente

const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;

class LayoutComponent extends Component {

    state = {
        component: 'valor inicial'  //Esta es la propiedad del estado donde va a estar el componente que se muestra en el momento
    }

    changeComponent = (param) => {//esta es la funcion donde cambio de componente a mostrar
        this.setState({
            component: param
        });
    };

    render() {
        return (
            <GlobalStyleLayout id="components-layout-demo-top-side-2">
                <Layout>
                    <Header className="header">
                        <div className="logo" />
                        <Menu
                            theme="dark"
                            mode="horizontal"
                            style={{ lineHeight: '64px' }}
                        >
                            {/* En estos items llamo a la funcion de cambiar el componente y le paso el mismo como paramatro */}
                            <Menu.Item onClick={() => this.changeComponent(<Users />)} key="1">Users</Menu.Item>
                            <Menu.Item onClick={() => this.changeComponent(<Register />)} key="2">Register</Menu.Item>
                            <Menu.Item key="3">nav 3</Menu.Item>
                            <IconsLayout />
                        </Menu>
                    </Header>
                    <Layout>
                        <Sider width={200} style={{ background: '#fff' }}>
                            <Menu
                                mode="inline"
                                defaultSelectedKeys={['1']}
                                defaultOpenKeys={['sub1']}
                                style={{ height: '100%', borderRight: 0 }}
                            >
                                <SubMenu key="sub1" title={<span><Icon type="user" />subnav 1</span>}>
                                    <Menu.Item key="1">option1</Menu.Item>
                                    <Menu.Item key="2">option2</Menu.Item>
                                    <Menu.Item key="3">option3</Menu.Item>
                                    <Menu.Item key="4">option4</Menu.Item>
                                </SubMenu>
                                <SubMenu key="sub2" title={<span><Icon type="laptop" />subnav 2</span>}>
                                    <Menu.Item key="5">option5</Menu.Item>
                                    <Menu.Item key="6">option6</Menu.Item>
                                    <Menu.Item key="7">option7</Menu.Item>
                                    <Menu.Item key="8">option8</Menu.Item>
                                </SubMenu>
                                <SubMenu key="sub3" title={<span><Icon type="notification" />subnav 3</span>}>
                                    <Menu.Item key="9">option9</Menu.Item>
                                    <Menu.Item key="10">option10</Menu.Item>
                                    <Menu.Item key="11">option11</Menu.Item>
                                    <Menu.Item key="12">option12</Menu.Item>
                                </SubMenu>
                            </Menu>
                        </Sider>
                        <Layout style={{ padding: '0 24px 24px' }}>
                            <Breadcrumb style={{ margin: '16px 0' }}>
                                <Breadcrumb.Item>Home</Breadcrumb.Item>
                                <Breadcrumb.Item>List</Breadcrumb.Item>
                                <Breadcrumb.Item>App</Breadcrumb.Item>
                            </Breadcrumb>
                            <Content style={{
                                background: '#fff', padding: 24, margin: 0, minHeight: 280,
                            }}
                            >
                                {/* En la siguiente linea llamo y muestro el componente almacenado en la propiedad corrrespondiente en el state */}
                                {this.state.component}
                            </Content>
                        </Layout>
                    </Layout>
                </Layout>
            </GlobalStyleLayout>
        );
    }
}

export default LayoutComponent;

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.