reactjs - 使用 TypeScript 进行 react : passing a number variable to a child component

Question

我试图将一个数字变量传递给组件，但 React 似乎将其转换为字符串。

这段代码:

interface Props {
  variable: number
  literal: number
}

const Parent = () => {
  const num = 2
  return <Child literal={1} variable={num}/>
}

const Child: React.SFC<Props> = (props) => {
  console.log(typeof props.variable)
  console.log(typeof props.literal)
  return <div/>
}

ReactDOM.render(<Parent/>, document.querySelector('#root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

将打印:

string
number

---

如何让 React 在传递变量时保留变量的类型？

Answer 1

我做了这样的事情

type Props = {
  literal: number
  variable: number
}

function Child(props: Props): JSX.Element {
  console.log(typeof props.literal)
  console.log(typeof props.variable)

  return <div />
}

function Parent(): JSX.Element {
  const num: number = 2

  return (
    <Child literal={1} variable={num}/>
  )
}

const rootElement = document.getElementById("root");
render(<Parent />, rootElement);

检查 codesandbox 中的控制台