在反應TS中將道具傳遞給孩子時出錯

我是 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;

孩子.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 中看到了一些答案，但無法弄清楚為什么會出現錯誤。我不確定我在這里缺少什么。提前致謝。

uj5u.com熱心網友回復：

這是使用受控元素在 TypeScript React中提升狀態的功能示例： textarea

TS 游樂場鏈接

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>
  );
};

您可以使用此代碼段運行上面的示例以查看它的作業情況：

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

<div id="root"></div><script src="https://unpkg.com/[email protected]/umd/react.development.js"></script><script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/[email protected]/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>

標籤：反应 打字稿 成分 亲子

上一篇：等到內心的承諾完成

下一篇：typescripttsc-p僅在dockerbuild中失敗