在 React TS 中将道具传递给孩子时出错

Question

我是 React 和 Typescript 的新手。当我尝试将道具从父母传递给孩子时，我收到错误：

TS2322: Type '{ changeValue: () => void; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'.   Property 'changeValue' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'.

父.tsx：

import * as React from 'react';
import { Child } from '../components/Child';

const Parent: React.FC = () => {

    function changeValue() {
        console.log("hello");
    }
  return (
    <div>
        <Child changeValue={changeValue}/>
      </div>
  );
};
export default Parent;

Child.tsx：

import * as React from 'react';
import { useState } from 'react';

export const Child: React.FC = (props) => {
  const [textValue, setTextValue] = useState(
    'let name; \n' + 'let age; \n' + 'name = 5;'
  );

  return (
    <div>
      <textarea
        id="details"
        name="details"
        value={props.data}
        onChange={() => changeValue}
      />
    </div>
  );
};

我在 stackoverflow 中看到了一些答案，但无法弄清楚错误出现的原因。我不确定我在这里缺少什么。 提前致谢。

Answer 1

这是一个在 TypeScript React 中使用 controlled textarea 元素的 lifting state up 的功能示例：

TS Playground link

import {
  default as React,
  ReactElement,
  useState,
} from 'react';

type ChildProps = {
  handleChange: (value: string) => void;
  text: string;
};

const Child = (props: ChildProps): ReactElement => {
  return (
    <div>
      <textarea
        id="details"
        name="details"
        onChange={ev => props.handleChange(ev.target.value)}
        value={props.text}
      />
    </div>
  );
};

const Parent = (): ReactElement => {
  const [textValue, setTextValue] = useState('let name; \n' + 'let age; \n' + 'name = 5;');

  const handleTextValueChange = (value: string) => {
    console.log(value);
    setTextValue(value);
  };

  return (
    <div>
      <Child text={textValue} handleChange={handleTextValueChange} />
    </div>
  );
};

您可以使用这个 sn-p 代码运行上面的示例来查看它是否正常工作：

textarea {
  height: 50vh;
  width: 70vw;
}

<div id="root"></div><script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone@7.16.4/babel.min.js"></script><script>Babel.registerPreset('tsx', {presets: [[Babel.availablePresets['typescript'], {allExtensions: true, isTSX: true}]]});</script>
<script type="text/babel" data-type="module" data-presets="tsx,react">

/**
 * The following line is here because this Stack Overflow snippet uses the
 * UMD module for React. In your code, you'd use the commented `import` lines
 * below it.
 */
const {useState} = React;

// import ReactDOM from 'react-dom';
// import {
//   default as React,
//   ReactElement,
//   useState,
// } from 'react';

type ChildProps = {
  handleChange: (value: string) => void;
  text: string;
};

const Child = (props: ChildProps): ReactElement => {
  return (
    <div>
      <textarea
        id="details"
        name="details"
        onChange={ev => props.handleChange(ev.target.value)}
        value={props.text}
      />
    </div>
  );
};

const Parent = (): ReactElement => {
  const [textValue, setTextValue] = useState('let name; \n' + 'let age; \n' + 'name = 5;');

  const handleTextValueChange = (value: string) => {
    console.log(value);
    setTextValue(value);
  };

  return (
    <div>
      <Child text={textValue} handleChange={handleTextValueChange} />
    </div>
  );
};

function Example (): ReactElement {
  return <Parent />;
}

ReactDOM.render(<Example />, document.getElementById('root'));

</script>