如何将js对象和函数传递给web组件

// 父组件
import ChildComponent from './ChildComponent';

const data = { name: 'John', age: 25 };

function ParentComponent() {
  return <ChildComponent data={data} />;
}

// 子组件
function ChildComponent(props) {
  const { data } = props;
  // 使用data对象
  return <div>{data.name}</div>;
}

// 父组件
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const handleClick = () => {
    // 处理点击事件
  };

  return <ChildComponent onClick={handleClick} />;
}

// 子组件
function ChildComponent(props) {
  const { onClick } = props;
  // 触发点击事件
  return <button onClick={onClick}>Click me</button>;
}

// 创建上下文
const MyContext = React.createContext();

// 父组件
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const data = { name: 'John', age: 25 };

  return (
    <MyContext.Provider value={data}>
      <ChildComponent />
    </MyContext.Provider>
  );
}

// 子组件
function ChildComponent() {
  return (
    <MyContext.Consumer>
      {data => (
        // 使用data对象
        <div>{data.name}</div>
      )}
    </MyContext.Consumer>
  );
}