symref
Version:
Static code checker for AI code agents (Windsurf, Cline, etc.)
97 lines (96 loc) • 3.07 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { Component, createRef } from 'react';
// パターン1: デコレータを使用したクラスコンポーネント
/*
function withLogger(WrappedComponent: typeof Component) {
return class extends WrappedComponent {
componentDidMount() {
console.log(`Component ${WrappedComponent.name} mounted`);
super.componentDidMount && super.componentDidMount();
}
};
}
@withLogger
class DecoratedClassComponent extends Component {
render() {
return <div>Decorated Class Component</div>;
}
}
*/
// パターン2: Refを使用したクラスコンポーネント
class RefClassComponent extends Component {
constructor() {
super(...arguments);
this.myRef = createRef();
}
componentDidMount() {
if (this.myRef.current) {
console.log('Ref is attached');
}
}
render() {
return _jsx("div", { ref: this.myRef, children: "Component with Ref" });
}
}
class LifecycleComponent extends Component {
constructor(props) {
super(props);
this.state = {
count: props.initialCount,
lastUpdate: new Date()
};
}
static getDerivedStateFromProps(props, state) {
if (props.initialCount !== state.count) {
return {
count: props.initialCount,
lastUpdate: new Date()
};
}
return null;
}
shouldComponentUpdate(nextProps, nextState) {
return nextState.count !== this.state.count;
}
componentDidUpdate() {
console.log('Component updated');
}
componentWillUnmount() {
console.log('Component will unmount');
}
render() {
return (_jsxs("div", { children: [_jsxs("p", { children: ["Count: ", this.state.count] }), _jsxs("p", { children: ["Last Update: ", this.state.lastUpdate.toISOString()] })] }));
}
}
// パターン4: 高階コンポーネントで包まれたクラスコンポーネント
const withData = (WrappedComponent) => {
return class WithData extends React.Component {
render() {
return _jsx(WrappedComponent, { ...this.props, data: "Injected Data" });
}
};
};
class DataConsumerComponent extends Component {
render() {
return _jsxs("div", { children: ["Data: ", this.props.data] });
}
}
const EnhancedComponent = withData(DataConsumerComponent);
// パターン5: 継承チェーンを持つコンポーネント
class BaseComponent extends Component {
baseMethod() {
return 'Base Method';
}
render() {
return _jsx("div", { children: "Base Component" });
}
}
class ExtendedComponent extends BaseComponent {
render() {
return (_jsxs("div", { children: ["Extended Component", _jsx("p", { children: this.baseMethod() })] }));
}
}
export {
// DecoratedClassComponent,
RefClassComponent, LifecycleComponent, EnhancedComponent, ExtendedComponent };
//# sourceMappingURL=AdvancedClassComponents.test.js.map