// @flow
import React from 'react';
import PropTypes from 'prop-types';
import { ImageButton } from '../Button';
type AddEmojiButtonPropTypes = {
small?: boolean,
children?: any, // eslint-disable-line react/require-default-props
};
const AddEmojiButton = ({
small,
children,
...other
}: AddEmojiButtonPropTypes) => (
<ImageButton
type="button"
{...other}
>
{small ? (
<img
alt="Add Emoji"
src="https://res.cloudinary.com/df9jsefb9/image/upload/c_scale,h_54,q_auto/v1503278075/assets/btn-add-emoji_3x.png"
srcSet="
https://res.cloudinary.com/df9jsefb9/image/upload/c_scale,h_108,q_auto/v1503278075/assets/btn-add-emoji_3x.png 2x,
https://res.cloudinary.com/df9jsefb9/image/upload/c_scale,h_162,q_auto/v1503278075/assets/btn-add-emoji_3x.png 3x
"
/>
) : (
<img
alt="Add Emoji"
src="https://res.cloudinary.com/df9jsefb9/image/upload/s--nnCHGEWM--/c_scale,h_110,q_auto/v1502250483/assets/group-2-copy-3_3x.png"
srcSet="
https://res.cloudinary.com/df9jsefb9/image/upload/s--nnCHGEWM--/c_scale,h_220,q_auto/v1502250483/assets/group-2-copy-3_3x.png 2x,
https://res.cloudinary.com/df9jsefb9/image/upload/s--nnCHGEWM--/c_scale,h_330,q_auto/v1502250483/assets/group-2-copy-3_3x.png 3x,
"
/>
)}
</ImageButton>
);
AddEmojiButton.defaultProps = {
small: false,
};
AddEmojiButton.propTypes = {
small: PropTypes.bool,
};
export default AddEmojiButton;
const声明在我上面附加的JavaScript源代码中不太清楚。
const AddEmojiButton = ({
small,
children,
...other
}: AddEmojiButtonPropTypes) => (
<ImageButton
在上面的代码中,您能告诉我们const声明中的{}意味着什么以及:运算符意味着什么?
通常在使用const或var声明对象时
const foo = {
name: 'foo'
age: 30,
gender: 'male'
func1 : (e) => {}
}
我知道有一个这样的声明,但我想知道为什么只有一个属性名称的道具,没有价值。
此外
({small,childeren,...other} : AddEmojiButtonPropTypes) => ImageButton
这种形式意味着什么?
我想知道原始的JavaScript语法是否是正确的表达式。
({small,childeren,...other} : AddEmojiButtonPropTypes) => ImageButton
3点是传播属性(docs),它来自es6传播。使用传播动态道具的Reactjs,请参阅documentation。所以如果你看一下这样的话
const AddEmojiButton = ({
small,
children,
...other
}: AddEmojiButtonPropTypes) => <ImageButton type="button" {...other} />
实际上解析other
,例子有对象width
和height
,它将成为:
const other = { witdh: "100", height: "100"};
<ImageButton type="button" width="100" height="100" />
见repl