tsx,Code片段,代码实例,代码示例,代码片段库

tsx 特征工程 - 处理周期特征

Handling Cyclical Features.txt

http://blog.davidkaleko.com/feature-engineering-cyclical-features.html

tsx App.tsx

App.tsx

import * as React from "react";
import TodoContainer from "./containers/TodoContainer";

export const App: React.FC<{}> = () => {
  return (
    <>
      <h1>React Redux Typescript</h1>
      <TodoContainer />
    </>
  );
};

tsx 反应-TS-无国籍官能组分

Test.tsx

import * as React from "react";

export interface Props {
  text: string;
}

const Test: React.FC<Props> = ({ text }:Props) => {
  return(
    <div>{text}</div>
  )
}

export default Test;

tsx REACT：具有构造函数的类组件 - TypeScript

REACT：具有构造函数的类组件 - TypeScript

Button.tsx

export interface ButtonProps {
  label?: string;
}

export interface ButtonState {
  //
}

class Button extends React.Component<ButtonProps, ButtonState> {
  constructor(props: ButtonProps) {
    super(props);
    this.state = {
      //
    };
  }

  render() {
    return <button>{this.props.label}</button>;
  }
}

export default Button;

tsx REACT：基本无状态功能组件 - TypeScript

REACT：基本无状态功能组件 - TypeScript

Button.tsx

export interface ButtonProps {
  label?: string;
}

const Button: React.FunctionComponent<ButtonProps> = props => {
  return <button>{props.label}</button>;
};

export default Button;

tsx 切换教程完成组件

切换教程完成组件

Switch.tsx

// [1]
import * as React from "react"
import { Frame, addPropertyControls, ControlType } from "framer"

// [2]
type Props = {
    isOn: boolean
    onValueChange: (isOn: boolean) => any
}

// [3]
export function Switch(props: Props) {
    // [4]
    const [state, setState] = React.useState({
        isOn: props.isOn,
    })

    // [5]
    React.useEffect(() => {
        setState({
            isOn: props.isOn,
        })
    }, [props.isOn])

    // [6]
    const handleTap = () => {
        props.onValueChange(!state.isOn)
        setState({
            isOn: !state.isOn,
        })
    }

    // [7]
    return (
        <Frame
            height={50}
            width={80}
            center
            borderRadius={25}
            // [8]
            onTap={handleTap}
            variants={{
                off: { background: "#BBBBBB" },
                on: { background: "#0070DF" },
            }}
            transition={{
                type: "tween",
                duration: 0.2,
            }}
            initial={props.isOn ? "on" : "off"}
            animate={state.isOn ? "on" : "off"}
        >
            <Frame
                size={46}
                top={2}
                left={2}
                borderRadius={"100%"}
                background="#FFFFFF"
                variants={{
                    off: { x: 0 },
                    on: { x: 30 },
                }}
                transition={{
                    type: "tween",
                    duration: 0.2,
                }}
            />
        </Frame>
    )
}

// [9]
Switch.defaultProps = {
    isOn: false,
    onValueChange: () => null,
    height: 50,
    width: 80,
}

// [10]
addPropertyControls(Switch, {
    isOn: {
        type: ControlType.Boolean,
        title: "Is On",
    },
})

tsx 开关教程 - 在React中

开关教程 - 在React中

SwitchParent.tsx

export function ParentFrame() {
	const [state, setState] = React.useState({
		mode: "day",
	})

	const handleSwitchFlip = () => {
		setState({
			mode: "night",
		})
	}

	return (
		<Frame>
            <Switch 
                isOn={state.mode === "night"} 
                onValueChange={handleSwitchFlip} />
		</Frame>
	)
}

tsx 切换教程转换

切换教程转换

Switch.tsx

<Frame
    height={50}
    width={80}
    center
    borderRadius={25}
    onTap={handleTap}
    variants={{
        off: { background: "#BBBBBB" },
        on: { background: "#0070DF" },
    }}
    initial={props.isOn ? "on" : "off"}
    animate={state.isOn ? "on" : "off"}
    transition={{
        type: "tween",
        duration: 0.2,
    }}
>
    <Frame
        size={46}
        top={2}
        left={2}
        borderRadius={"100%"}
        background="#FFFFFF"
        variants={{
            off: { x: 0 },
            on: { x: 30 },
        }}
        transition={{
            type: "tween",
            duration: 0.2,
        }}
    />
</Frame>

tsx Switch Tutorial Variants

Switch Tutorial Variants

Switch.tsx

<Frame
    height={50}
    width={80}
    center
    borderRadius={25}
    onTap={handleTap}
    variants={{
        off: { background: "#BBBBBB" },
        on: { background: "#0070DF" },
    }}
>
    <Frame
        size={46}
        top={2}
        left={2}
        borderRadius={"100%"}
        background="#FFFFFF"
        variants={{
            off: { x: 0 },
            on: { x: 30 },
        }}
    />
</Frame>

tsx 切换教程框架

切换教程框架

Switch.tsx

<Frame
    height={50}
    width={80}
    center
    borderRadius={25}
    onTap={handleTap}
>
    <Frame
        size={46}
        top={2}
        left={2}
        borderRadius={"100%"}
        background="#FFFFFF"
    />
</Frame>