Блог

Тым за помощью заранее!
Я занимаюсь знаменитым курсом реагирования Coursera!
В App.js Меню отображается как компонент. MenuComponent.js заключается в следующем:

 import React,{Component} from 'react';
import DishDetail from './DishDetail';
import { Card, CardImg,  CardImgOverlay} from 'reactstrap';
class Menu extends Component {

    constructor(props) {
        super(props);

        this.state = {
            selectedDish: null
        }
    }

    onDishSelect(dish) {
        this.setState({ selectedDish: dish});
    }

    renderDish() {
        if (this.state.selectedDish)
            return <DishDetail dish={this.state.selectedDish} />;
        else
            return(
                <div></div>
            );
    }

    render() {        
        const menu = this.props.dishes.map((dish) => {
            return (            
                <Card 
                    key={dish.id} 
                    className="col-12 col-md-5 m-1" 
                    onClick={() => this.onDishSelect(dish)}
                    >
                    <CardImg width="100%" className="card-img-top" src={dish.image} alt={dish.name} />
                    <CardImgOverlay className="card-image-overlay">
                        <h5>{dish.name}</h5>                      
                    </CardImgOverlay>
                </Card>                
            );
        });
        
        return (
            <div className="container">
                <div className="row">                     
                    {menu}                          
                </div>
                <div className="row">
                    <div classNmae="col-12 col-md-5 m-1">
                        {this.renderDish(this.state.selectedDish)}
                    </div>
                </div>
            </div>
        );
    }
}
export default Menu;

 

DishDetail.js заключается в следующем:

 import React, { Component } from 'react';
import { Card, CardImg,  CardText, CardBody,CardTitle} from 'reactstrap';
class DishDetail extends Component {
    
    render () {
        return (<div className="row">
                <div classname="col-6 col-md-4" >
                    <Card>
                        <CardImg style={{maxWidth:'443 px', maxHeight:'443 px'}} top src={this.props.dish.image} alt={this.props.dish.name} />
                        <CardBody>
                            <CardTitle>{this.props.dish.name}</CardTitle>
                            <CardText className="text-center">{this.props.dish.description}</CardText>
                        </CardBody>
                    </Card>
                </div>                  
                <div className="col-6 col-md-4">
                    <h3>Comments</h3>
                    {
                        this.props.dish.comments.map( (comment) => {
                            return (
                                <div id={comment.id}>
                                    <p>{comment.comment}</p>
                                    <p>--{comment.author} , {comment.date}</p>
                                </div>
                            )
                        })
                    }    
                </div>
                </div>                                            
        );
    }
}
export default DishDetail;
 

Я хочу визуализировать детали блюда, и это комментарии в форме col-6 col-6 означает бок о бок. Но вместо этого я получаю вывод типа:-

Желаемый результат выглядит так:

Вопрос для решения заранее!

Попробуйте использовать его таким образом:

 import React, { Component } from 'react';
import { Card, CardImg,  CardText, CardBody,CardTitle} from 'reactstrap';
class DishDetail extends Component {
    
    
    render () {
        const myStyle = {
          maxWidth:'443px',
          maxHeight:'443px'
        }
        return (<div className="row">
                <div classname="col-6 col-md-4" >
                    <Card>
                        <CardImg style={myStyle} top src={this.props.dish.image} alt={this.props.dish.name} />
                        <CardBody>
                            <CardTitle>{this.props.dish.name}</CardTitle>
                            <CardText className="text-center">{this.props.dish.description}</CardText>
                        </CardBody>
                    </Card>
                </div>                  
                <div className="col-6 col-md-4">
                    <h3>Comments</h3>
                    {
                        this.props.dish.comments.map( (comment) => {
                            return (
                                <div id={comment.id}>
                                    <p>{comment.comment}</p>
                                    <p>--{comment.author} , {comment.date}</p>
                                </div>
                            )
                        })
                    }    
                </div>
                </div>                                            
        );
    }
}
export default DishDetail;
 

https://www.w3schools.com/react/showreact.asp?filename=demo2_react_css_inline_object

Это единое 443px целое, между 443 » и » нет пространства px . В противном случае CSS не будет применен к выбранному вами элементу.

 <Card>
  <CardImg
    style={{ maxWidth: "443px", maxHeight: "443px" }}
    top
    src={this.props.dish.image}
    alt={this.props.dish.name}
  />
  <CardBody>
    <CardTitle>{this.props.dish.name}</CardTitle>
    <CardText className="text-center">{this.props.dish.description}</CardText>
  </CardBody>
</Card>
 

Еще один пример, когда 10 px (с пробелом) блок не будет работать.

 import React from 'react';
export default class App extends React.Component {
  render() {
    const mystyle = {
      color: "white",
      backgroundColor: "DodgerBlue",
      padding: "10 px", // check here not applied
      fontFamily: "Arial"
    };
    return (
      <div>
      <h1 style={mystyle}>Hello Style!</h1>
      <p>Add a little style!</p>
      </div>
    );
  }
}

 

Демонстрация в песочнице