Question

我尝试编写typescript代码，通过在render方法中编写以下反应代码来传播子组件中的组件属性：

<MyComponent {...this.props}> </MyComponent>

typescript编译器似乎不接受这种语法。任何解决方法？

Answer 1

似乎解决方法是使用React.CreateElement： https://facebook.github.io/react/docs/transferring-props.html 在等待打字稿时考虑这种语法

Answer 2

我对TypeScript + React组合了解不多，但是，以下代码不会返回错误：

/// <reference path="./typings/react/react.d.ts" />
import React = require('react');

interface HelloWorldProps {
    name: string;
}

var HelloMessage = React.createClass<HelloWorldProps, any>({
    render: function() {
        return <div {...this.props.name}>Hello</div>;
    }
});

并且它转换为

/// <reference path="./typings/react/react.d.ts" />
var React = require('react');
var HelloMessage = React.createClass({
    render: function () {
        return React.createElement("div", React.__spread({}, this.props.name), "Hello");
    }
});

当我使用以下命令（tsc 1.7.5）运行它时：

tsc --module commonjs --target es5 --jsx react main.tsx

这意味着支持扩展运算符。我不知道为什么它不适合你。也许this article会有所帮助。

reactjs组件在打字稿中支持传播

2 个答案: