Question

我的应用程序中有一个Redux连接的HelloWorld组件，带有React和Redux：

interface StateProps {
  isLoggedIn: boolean;
}

interface Props extends StateProps {
  text: string;
}

class HelloWorld extends React.Component<Props, {}> {
  render() {
    return <div>{this.props.text}</div>;
  }
}

const mapStateToProps = (state: AppState): StateProps => {
  return {
    isLoggedIn: state.isLoggedIn
  };
};

export default connect(mapStateToProps)(HelloWorld);

道具与isLoggedIn（使用我的全局mapStateToProps中的AppState映射）和text组合在一起。我希望使用该组件时需要text道具，如下所示：

<HelloWorld text="MyText" />

我该如何表达？

Answer 1

安装PropTypes库：npm install prop-types --save

然后：

import PropTypes from 'prop-types';
...
//rest of your code
...
HelloWorld.propTypes = {
  text: PropTypes.string.isRequired
};

这将使text属性成为组件必需的字符串。

Answer 2

import React from 'react';
import PropTypes from 'prop-types';

class HelloWorld extends React.Component<Props, {}> {
  render() {
    return <div>{this.props.text}</div>;
  }
}

const mapStateToProps = (state: AppState): StateProps => {
  return {
    isLoggedIn: state.isLoggedIn
  };
};

HelloWorld.propTypes = {
   text: PropTypes.string.isRequired
}
export default connect(mapStateToProps)(HelloWorld);

在React中创建所需的组件属性

2 个答案: