网站建设报价清单明细,免费设计网站logo,建设网站的功能及目的是什么意思,上海室内设计工作室排名自定义组件的时候往往需要传 children#xff0c;由于写法比较多样#xff0c;我就总结了一下。 方案列表 1. 类组件1.1 类组件#xff0c;不使用解构1.2 类组件#xff0c;使用解构 2. 函数组件2.1 函数组件#xff0c;不使用解构2.2 函数组件#xff0c;外部解构2.3 函…自定义组件的时候往往需要传 children由于写法比较多样我就总结了一下。 方案列表 1. 类组件1.1 类组件不使用解构1.2 类组件使用解构 2. 函数组件2.1 函数组件不使用解构2.2 函数组件外部解构2.3 函数组件内部解构 3. 普通函数3.1 普通函数内部解构3.2 普通函数外部解构3.3 普通函数外部解构不使用自定义Type3.4 普通函数不使用解构不使用自定义Type 调用及展示 要自定义的组件是这样的 其中包含一个 title 和一个 children。
定义一个后面要用到的 Props:
/** 定义属性对象* - title: 标题* - children: 子组件*/
type Props {title: string;children?: React.ReactNode;
};1. 类组件
1.1 类组件不使用解构
class ClassComponent1 extends ComponentProps {render(): ReactNode {return (div style{{ backgroundColor: red }}h2{this.props.title}/h2{this.props.children}/div);}
}1.2 类组件使用解构
class ClassComponent2 extends ComponentProps {render(): ReactNode {// 解构赋值const { title, children } this.props;return (div style{{ backgroundColor: red }}h2{title}/h2{children}/div);}
}2. 函数组件
2.1 函数组件不使用解构
const FunctionComponent1: React.FCProps (props) {return (div style{{ backgroundColor: orange }}h2{props.title}/h2{props.children}/div);
};2.2 函数组件外部解构
const FunctionComponent2: React.FCProps ({ title, children }) {return (div style{{ backgroundColor: orange }}h2{title}/h2{children}/div);
};2.3 函数组件内部解构
const FunctionComponent3: React.FCProps (props) {// 解构赋值const { title, children } props;return (div style{{ backgroundColor: orange }}h2{title}/h2{children}/div);
};3. 普通函数
3.1 普通函数内部解构
function NormalFunction1(props: Props) {// 解构赋值const { title, children } props;return (div style{{ backgroundColor: yellow }}h2{title}/h2{children}/div);
}3.2 普通函数外部解构
function NormalFunction2({ title, children }: Props) {return (div style{{ backgroundColor: yellow }}h2{title}/h2{children}/div);
}3.3 普通函数外部解构不使用自定义Type
function NormalFunction3({title,children,
}: {title: string;children?: React.ReactNode;
}) {return (div style{{ backgroundColor: yellow }}h2{title}/h2{children}/div);
}3.4 普通函数不使用解构不使用自定义Type
function NormalFunction4(props: { title: string; children?: React.ReactNode }) {return (div style{{ backgroundColor: yellow }}h2{props.title}/h2{props.children}/div);
}调用及展示
export default class ChildrenPage extends Component {render() {return (div style{{ padding: 20px }}h1组件传children/h1ClassComponent1 title类组件不使用解构p这里是children/p/ClassComponent1ClassComponent2 title类组件使用解构p这里是children/p/ClassComponent2FunctionComponent1 title函数组件不使用解构p这是里children/p/FunctionComponent1FunctionComponent2 title函数组件外部解构p这是里children/p/FunctionComponent2FunctionComponent3 title函数组件内部解构p这是里children/p/FunctionComponent3NormalFunction1 title普通函数内部解构p这里是children/p/NormalFunction1NormalFunction2 title普通函数外部解构p这里是children/p/NormalFunction2NormalFunction3 title普通函数外部解构不使用自定义Typep这里是children/p/NormalFunction3NormalFunction4 title普通函数不使用解构不使用自定义Typep这里是children/p/NormalFunction4/div);}
}
