将正确的类型传递给React / Typescript中的函数时出错

Question

当我将字符串变量传递给函数时，我遇到了问题。

我创建了MyMessageProps接口，该接口在字符串上声明消息

后来的功能MyMessage使用此接口并返回此消息。

当我添加React Component并尝试将此功能添加到按钮onClick错误时出现。

interface MyMessageProps {
  message: string;
}

function MyMessage({ message }: MyMessageProps) {
  return <div>i shall speak! my message is: {message}</div>;
}

class App extends Component {

  render() {

    const variable = 'test';

    return (
      <div>
            <button onClick = {() => MyMessage(variable)}></button>
      </div>
    );
  }
}

export default App;

Answer 1

您的函数需要一个类似这样的对象：

const mssg = {
  message: 'MyMessage'
}

尝试一下：

interface MyMessageProps {
  message: string;
}

function MyMessage({ message }: MyMessageProps) {
  return <div>i shall speak! my message is: {message}</div>;
}

class App extends Component {

  render() {

    const variable = {
        message: 'my test'
     };

    return (
      <div>
            <button onClick = {() => MyMessage(variable)}></button>
      </div>
    );
  }
}

export default App;