Question

// @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语法是否是正确的表达式。

Answer 1

({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

关于反应javascript语法const语法

1 个答案: