React 进阶，组件创建的4种方法

最新推荐文章于 2021-03-17 12:43:02 发布

燕雀于鸿鹄

最新推荐文章于 2021-03-17 12:43:02 发布

阅读量105

点赞数

分类专栏： React 文章标签： react

本文链接：https://blog.csdn.net/x235711/article/details/106653123

版权

React 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

React 进阶，组件创建的4种方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="react-container">
    </div>
    <script src="https://unpkg.com/react@15.4.2/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15.4.2/dist/react-dom.js"></script>
    <script>
       

        const IngredientsList = React.createClass({
            displayName: "IngredientsList",
            render() {
                return React.createElement("ui", null, 
                    this.props.items.map((ingredient, i) => {
                      return React.createElement("li", {key: i}, ingredient);  
                    })
                )
            }
        });

        class IngredientsList2 extends React.Component {

            renderListItem(ingredient, i) {
                return React.createElement("li", {key: i}, ingredient);
            }

            render() {
                return React.createElement("ul", null,
                    this.props.items.map(this.renderListItem)
                )
            }

        }

        const IngredientsList3 = props => {
            return React.createElement("ul", null,
                props.items.map((ingredient, i) => {
                    return React.createElement("li", {key: i}, ingredient);
                })
            )
        }

        const IngredientsList4 = ({items}) => {
            return React.createElement("ul", null, 
                items.map((ingredient, i) => {
                    return React.createElement("li", {key: i}, ingredient);
                })
            )
        }

        const items = [
            "1 lb Salmon",
            "1 cup Pine Nuts",
            "2 cups Butter Lettuce"
        ]

        const list = React.createElement(IngredientsList4, {items}, null);
        console.log(list);
        ReactDOM.render(list, document.getElementById('react-container'));
    </script>
</body>
</html>

燕雀于鸿鹄

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React 进阶，组件创建的4种方法

React 进阶，组件创建的4种方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body&gt
复制链接

扫一扫