javascript - ReactJS 组件渲染问题

Question

我希望我的网页看起来类似于 this:掌握组件的语法和约定可能很简单，但正如您想象的那样，我玩得很开心。我在下面编写的很多代码几乎感觉像是伪代码，而且我不确定我编写的代码与真实代码的接近程度。

您是否可以发现有助于改进此代码的危险信号？

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <div id="app"></div>

    <script type="text/babel">
    const prod_img = 'http://10.104.0.15/care-products.jpg';
    const prod_name = 'Bath and Body Products';
    const prod_description = 'The bath and body category includes all the items you need to take care of your skin and external body surfaces.';

  const ProductImage = (props) => {
        return <img src={props.prod_img} />;
    };

const ProductName = (props) => {
    return <h2>{props.prod_name}</h2>;
};

const ProductDesc = (props) => {
    return <p>{props.prod_description}</p>;
};

const Product = (props) => {
    return (
    <div>
        <ProductImage image={prod_img} />
        <ProductName name={prod_name} />
        <ProductDesc description={prod_description}/>
    </div>
    );

};

ReactDOM.render(<Product />, document.getElementById('app'));
</script>

Answer 1

Prop 调用不正确。如果您有以下组件(应该是):

 <ProductImage image={prod_img} />
 <ProductName name={prod_name} />
 <ProductDesc description={prod_description}/>

在组件中调用它应该是这样的:

const ProductImage = (props) => {
    return <img src={props.image} />;
};

const ProductName = (props) => {
    return <h2>{props.name}</h2>;
};

const ProductDesc = (props) => {
    return <p>{props.description}</p>;
};

综合起来:

const prod_img = 'http://10.104.0.15/care-products.jpg';
const prod_name = 'Bath and Body Products';
const prod_description = 'The bath and body category includes all the items you need to take care of your skin and external body surfaces.';

const ProductImage = (props) => {
    return <img src={props.image} />;
};

const ProductName = (props) => {
    return <h2>{props.name}</h2>;
};

const ProductDesc = (props) => {
    return <p>{props.description}</p>;
};

const Product = (props) => {

    return <div><ProductImage image={prod_img} /><ProductName name={prod_name} /><ProductDesc description={prod_description}/> </div> 
};



ReactDOM.render(<Product />, document.getElementById('app'));

JSFiddle here