将道具传递到自定义组件中

// 父组件
import React from 'react';
import CustomComponent from './CustomComponent';

function ParentComponent() {
  const data = { name: 'Alice', age: 25 };
  const handleClick = () => alert('Button clicked!');

  return (
    <div>
      <CustomComponent user={data} onClick={handleClick} />
    </div>
  );
}

export default ParentComponent;

// 子组件
import React from 'react';

function CustomComponent(props) {
  return (
    <div>
      <p>Name: {props.user.name}</p>
      <p>Age: {props.user.age}</p>
      <button onClick={props.onClick}>Click Me</button>
    </div>
  );
}

export default CustomComponent;

// 错误的做法
function CustomComponent(props) {
  props.user.name = 'Bob'; // 不应该这样做
}

// 正确的做法
function CustomComponent(props) {
  const userCopy = { ...props.user, name: 'Bob' };
}

// 使用TypeScript
interface User {
  name: string;
  age: number;
}

function CustomComponent(props: { user: User; onClick: () => void }) {
  // ...
}