CXJS函数式组件控制器中参数的访问与使用方法问询

针对你开发Todo列表应用时遇到的「独立控制器如何访问组件参数」的问题，结合CXJS的设计逻辑，我整理了两种最常用的实现方式，完全匹配你提到的官方文档进阶示例思路：

1. 直接传递组件Props到控制器（最常用） #

这是官方LineChart示例采用的方案，核心是把组件接收的参数通过组件标签属性传递给控制器，再在控制器内通过this.options（类控制器）或直接解构参数（函数式控制器）获取。

适配Todo条目组件的代码示例： #

首先定义接收todoItem和onToggle回调的函数式组件，把参数绑定到控制器上：

const TodoItem = ({ todoItem, onToggle }) => (
  <cx>
    {/* 将组件参数作为属性传给控制器 */}
    <div controller={TodoItemController} todo={todoItem} onToggle={onToggle}>
      <input type="checkbox" bind="checked" onClick="toggleCompleted" />
      <span text="todo.text" />
    </div>
  </cx>
);

类式控制器的参数访问：

import { Controller } from 'cx/ui';

class TodoItemController extends Controller {
  init() {
    // 从options中取出传递的参数
    const { todo, onToggle } = this.options;
    
    // 将todo数据同步到控制器的data对象，供模板绑定使用
    this.data.set('todo', todo);
    // 可以把回调函数存到控制器实例，方便后续调用
    this.onToggle = onToggle;
  }

  // 自定义方法中使用参数/回调
  toggleCompleted() {
    const currentTodo = this.data.get('todo');
    const updatedTodo = { ...currentTodo, completed: !currentTodo.completed };
    // 调用父组件传递的回调
    this.onToggle(updatedTodo);
  }
}

函数式控制器的参数访问：

如果用函数式控制器，参数会直接作为第一个参数传入：

const TodoItemController = (options) => {
  const { todo, onToggle } = options;
  
  return {
    init() {
      this.data.set('todo', todo);
    },
    toggleCompleted() {
      const updatedTodo = { ...this.data.get('todo'), completed: !this.data.get('todo').completed };
      onToggle(updatedTodo);
    }
  };
};

2. 响应参数更新（进阶场景） #

如果组件参数会动态变化（比如Todo条目被编辑后），可以在控制器的update生命周期方法中监听this.options的变化，同步更新控制器内部数据：

class TodoItemController extends Controller {
  update() {
    const newTodo = this.options.todo;
    const currentTodo = this.data.get('todo');
    
    // 仅当todo内容变化时同步
    if (newTodo.id === currentTodo.id && newTodo.text !== currentTodo.text) {
      this.data.set('todo.text', newTodo.text);
    }
  }
}

关键逻辑对应官方文档示例 #

你提到的LineChart示例中，{ data, chartStyle, lineStyle }这些组件参数，正是通过<Svg style={chartStyle} controller={MyController} data={data} lineStyle={lineStyle}>的方式传递给控制器，和上面Todo组件的实现逻辑完全一致——控制器通过this.options.data、this.options.lineStyle即可访问这些参数。

内容的提问来源于stack exchange，提问作者timo18146