[英]how to change syntax Typescript to javascript React native
i'm building Raect Native with Expo, trying to make custom dropdown and i find and article wit an awesome expiation how to do that here我正在用 Expo 构建 Raect Native,试图制作自定义下拉菜单,我发现并写了一篇很棒的文章,如何在这里做到这一点
the code written with typeScript syntax, but my project using a javaScript syntax so使用 typeScript 语法编写的代码,但我的项目使用 javaScript 语法所以
interface Props { label: string; } const Dropdown: FC<Props> = ({ label }) => { const [visible, setVisible] = useState(false); const toggleDropdown = () => { setVisible(!visible); }; const renderDropdown = () => { if (visible) { return ( <Text style={styles.dropdown}> This is where the dropdown will be rendered. </Text> ); } }; return ( <TouchableOpacity style={styles.button} onPress={toggleDropdown} > {renderDropdown()} <Text style={styles.buttonText}>{label}</Text> <Icon type='font-awesome' name='chevron-down'/> </TouchableOpacity> ); }
A js script is a valid ts script so you can 'use both'. js 脚本是有效的 ts 脚本,因此您可以“同时使用两者”。
(In fact every thing is typescript (sometimes without types)) (实际上每件事都是打字稿(有时没有类型))
To make this full javascript you have to suppress types and interfaces, like this :要制作完整的 javascript,您必须抑制类型和接口,如下所示:
// interface Props {
// label: string;
// }
// const Dropdown: FC<Props> = ({ label }) => {
const Dropdown = ({ label }) => {
const [visible, setVisible] = useState(false);
const toggleDropdown = () => {
setVisible(!visible);
};
const renderDropdown = () => {
if (visible) {
return (
<Text style={styles.dropdown}>
This is where the dropdown will be rendered.
</Text>
);
}
};
return (
<TouchableOpacity
style={styles.button}
onPress={toggleDropdown}
>
{renderDropdown()}
<Text style={styles.buttonText}>{label}</Text>
<Icon type='font-awesome' name='chevron-down'/>
</TouchableOpacity>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.