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

道具调用不正确。如果您有以下组件（应该是）：

 <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

ReactJS组件呈现问题

1 个答案: