与JavaScript恋爱之React

最新推荐文章于 2025-08-09 20:51:19 发布

weixin_33884611

最新推荐文章于 2025-08-09 20:51:19 发布

阅读量79

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000008097852

本文通过具体示例展示了React中组件的组合与继承的应用方法。使用组合的方式创建了一个带有花哨边框的对话框组件，并通过继承实现了注册对话框的功能。此示例还涉及状态管理和事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Composition vs Inheritance

function FancyBorder(props) {
    return (
        <div className={'FancyBorder FancyBorder-' + props.color}>
            {props.children}
        </div>
    );
}
function Dialog(props) {
    return (
        <FancyBorder color="blue">
            <h1 className="Dialog-title">
                {props.title}
            </h1>
            <p className="Dialog-message">
                {props.message}
            </p>
            {props.children}
        </FancyBorder>
    );
}

class SignUpDialog extends React.Component {
    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
        this.handleSignUp = this.handleSignUp.bind(this);
        this.state = {login: ''};
    }
    handleChange(e) {
        this.setState({login: e.target.value});
    }

    handleSignUp() {
        alert(`Welcome aboard, ${this.state.login}!`);
    }

    render() {
        return (
            <Dialog title="Mars Exploration Program"
                    message="How should we refer to you?">
                <input value={this.state.login}
                       onChange={this.handleChange} />
                <button onClick={this.handleSignUp}>
                    Sign Me Up!
                </button>
            </Dialog>
        );
    }

}
ReactDOM.render(
    <SignUpDialog />,
    document.getElementById('main_center')
);