Реакция, условное отображение компонента на основе связи между родительским и двумя дочерними компонентами.

Question

Я новичок в React, я пытаюсь сделать следующее: у меня есть родительский компонент, который несет состояние, и два потомка, которые считаются так называемыми презентационными компонентами, скажем, (X , Y) . Итак, Компонент X получает массив Предметов в качестве реквизита от родителя и отрисовывает его. Теперь событие должно быть запущено для одного из Предметов в компоненте Х , затем onClick функция будет запущена, возвращая Item.id родительскому элементу, родительский элемент затем отфильтрует элементы в состоянии и передаст выбранный элемент компоненту Y , теперь я хочу Y , который будет отображаться, если и только если он успешно получил выбранный Предмет от родителя, вот мой код.

// PARENT COMPONENT
class Main extends Component {

  constructor(props) {
    super(props);

    this.state = {
      dishes: DISHES,
      selectedDish: null
    }
  }

  onDishSelect(dishId){
    this.setState({ selectedDish : dishId })
  }

  render() {
    return (
      <div >
       <Navbar dark color="secondary" >
        <div className="container">
          <NavbarBrand href="/">My Brand</NavbarBrand>
        </div>
       </Navbar>
       <Menu dishes={this.state.dishes}
            onClick={(dishId) => this.onDishSelect(dishId)} />
       <DishDetails dish={this.state.dishes.filter(dish => dish.id === this.state.selectedDish)[0]} />
      </div>
    );
  }
}

Компонент X

render() {
        const menu = this.props.dishes.map(item => {
            return (
                <div key={item.id} className="col-12 col-md-5 offset-md-1 mt-3">
                    <Card onClick={() => this.props.onClick(item.id)}>
                        <CardImg width="100%" src={item.image} alt={item.name} />
                        <CardImgOverlay  className="ml-5">
                            <CardTitle >{item.name}</CardTitle>
                        </CardImgOverlay>
                    </Card>
                </div>
            )
        });

        return (
            <div className="container">
                <div className="row">
                    { menu }
                </div>
               
            </div>
        );
    }

Наконец, компонент Y

class DishDetails extends Component {
    constructor(props) {
        super(props)
    }

    renderCard(dish) {
       if(this.props.dish){
        return (
            <div className="col-12 col-md-5 offset-md-1 mt-5 ">
                <Card>
                    <CardImg width="100%" src={dish.image} alt={dish.name} />
                    <CardBody>
                        <CardTitle>{ dish.name }</CardTitle>
                        <CardText>{ dish.description }</CardText>
                    </CardBody>
                </Card>
            </div>
        )
       } else {
           return(<div></div>)
       }
    }

    renderViews(review){
       if(this.props.dish){
        return(
            <div key={review.id} className="col-12 col-md-5 mt-5">
                <Media body className="mt-2">
                    <p>{review.comment}</p>
                    <p>{ review.author }, {new Intl.DateTimeFormat('en-US',{year: 'numeric', month:'short', day: '2-digit'}).format(new Date(Date.parse(review.date)))}</p>
                </Media>
            </div>
        )
       } else {
           return(<div></div>)
       }
    }



    render(){
        return(
            <div className="row">
                { this.renderCard(this.props.dish) }
                { this.renderViews(this.props.dish.comments) }
            </div>
        )
        
    }
}

Я знаю, что структура кода очень запутана, сейчас я просто больше беспокоюсь о функциональности, заранее спасибо.

Answer 1

Документацию об условном рендеринге можно найти на https://reactjs.org/docs/conditional-rendering.html

Это относится к вашему коду, как этот

// PARENT COMPONENT
class Main extends Component {

  constructor(props) {
    super(props);

    this.state = {
      dishes: DISHES,
      selectedDish: null
    }
  }

  onDishSelect(dishId){
    this.setState({ selectedDish : dishId })
  }

  render() {
    return (
      <div >
       <Navbar dark color="secondary" >
        <div className="container">
          <NavbarBrand href="/">My Brand</NavbarBrand>
        </div>
       </Navbar>
       <Menu dishes={this.state.dishes}
            onClick={(dishId) => this.onDishSelect(dishId)} />
         {this.state.selectedDish !== null &&
          <DishDetails dish={this.state.dishes.filter(dish => dish.id === this.state.selectedDish)[0]} />
         }
      </div>
    );
  }
}

Таким образом, DishDetails оценивается только тогда, когда this.state.selectedDish отличается от null, например когда событие из X было обработано