React组件组合使用,使用了state,props,ref三个属性

最新推荐文章于 2023-01-28 09:52:08 发布

shilu963

最新推荐文章于 2023-01-28 09:52:08 发布

阅读量207

点赞数

分类专栏： react 文章标签： react组件

本文链接：https://blog.csdn.net/shilu963/article/details/103584804

版权

react 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script src="https://cdn.bootcss.com/prop-types/15.7.2/prop-types.js"></script>
</head>
<body>
<div id="example"></div>

<script type="text/babel">
    class App extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                todos: ['吃饭', '睡觉', '敲代码']
            }
            this.addTodo = this.addTodo.bind(this)
        }

        addTodo(todo) {
            const todos = this.state.todos;
            todos.unshift(todo);
            this.setState(todos)
        }

        render() {
            const {todos} = this.state;

            return (
                <div>
                    <h1>Simple TODO List</h1>
                    <Add count={todos.length} addTodo={this.addTodo}/>
                    <List todos={todos}/>
                </div>
            )
        }

    }

    class Add extends React.Component {
        constructor(props) {
            super(props);
            this.add = this.add.bind(this)
        }

        add() {
            const todo = this.input.value;
            this.props.addTodo(todo)
            this.input.value = ''
        }

        render() {
            const count = this.props.count
            return (
                <div>
                    <input type="text" ref={input => this.input = input}/>
                    <button onClick={this.add}>add #{count + 1}</button>
                </div>
            )
        }
    }
    Add.propTypes = {
        count: PropTypes.number.isRequired,
        addTodo: PropTypes.func.isRequired,
    }
    class List extends React.Component {
        render() {
            const todos = this.props.todos;
            return (
                <ul>
                    {
                        todos.map((todo, index) => {
                                return <li key={index}>{todo}</li>
                            }
                        )
                    }
                </ul>
            )
        }
    }

    List.propTypes = {
        todos: PropTypes.array.isRequired
    }

    ReactDOM.render(<App/>, document.getElementById('example'))
</script>
</body>
</html>

shilu963

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
React组件组合使用,使用了state,props,ref三个属性

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.d...
复制链接

扫一扫