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

如果需要整数而不是string，可以使用本机javascript方法更改Variable Type，在这种情况下，您可以从字符串中获取整数

  const num_integer =  parseInt(num);

然后您就有整数

Answer 2

我做了这样的事情

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

中检查控制台

使用TypeScript进行反应：将数字变量传递给子组件

2 个答案: