将值传递给模态reactjs

Question

我想将值传递给Modal，但是我无法像这样传递它：

我的模态：

const AmountToPayModal = (dollar: number = 0) => (
  <Container>
    <Title>
       <FormattedMessage id="creditPagePayment" />
    </Title>
    <Line />
    <SectionLabel>
       <FormattedMessage id="creditPageNoCreditRequest" />
     </SectionLabel>
     <AmountLabel>
      <span>&#36; {dollar}</span>
     </AmountLabel>
    <SupportSpan>
       <SupportLabel>
         <FormattedMessage id="creditPagePaymentQuest" />
        </SupportLabel>
     </SupportSpan>
   </Container>
);

我的演示者：

import * as React from 'react';
import * as COLORS from '../../../constants/colors';
import styled from 'styled-components';
import AmountToPayModal from 
'../../../components/DataPayment/AmountToPayModal';

const Presenter = () => (
  <Container>
    <AmountToPayModal dollar={1600}/> /* Error here */
  </Container>
);

const Container = styled.div`
   background-color: ${COLORS.bgLightGrey};
`;

export default Presenter;

错误说：

  

输入'{dollar：1600; }'不能分配给类型   '内在属性＆amp;数'。输入'{dollar：1600; }' 不是   可分配给“数字”类型。       '$ dollar：1600;类型中缺少属性'toFixed'; }“

Answer 1

JS表达式在花括号中指定

<AmountToPayModal dollar={1600} />

<击>

React功能组件应该接受一个props参数，试试：

export interface ModalProps {
    dollar?: number;
}

const AmountToPayModal = (props: ModalProps = { dollar: 0 }) => (
  ...
);

参考文献：

• https://reactjs.org/docs/components-and-props.html