reactjs - CXJS using parameters in Controller

Question

How can I use parameters in a controller of the functional component?

like https://docs.cxjs.io/concepts/functional-components

I make lets say a to do list app, with a list component with data binding and a todo entry component but the entry has so much logic that it has its own controller.

how can i access these parameters in a controller like an enhanced example of the docs:

const LineChart = ({ data, chartStyle, lineStyle }) => <cx>
    <Svg style={chartStyle} controller={MyController}>
        <Chart offset="20 -20 -40 40" axes={{ x: { type: NumericAxis }, y: { type: NumericAxis, vertical: true } }}>
            <Gridlines/>
            <LineGraph data={data} lineStyle={lineStyle} />
        </Chart>
    </Svg>
</cx>;




    class MyController extends Controller {
        onInit() {
            //use Parameter chartStyle in code.
    var myparameter = {{chartStyle}}; //??? < how do i get the value 
    ....
        }

    }

Answer 1

您可以将参数传递给控制器​​：

const LineChart = ({ data, chartStyle, lineStyle }) => <cx>
    <Svg style={chartStyle} controller={{ type: MyController, chartStyle }}>
        <Chart offset="20 -20 -40 40" axes={{ x: { type: NumericAxis }, y: { type: NumericAxis, vertical: true } }}>
            <Gridlines/>
            <LineGraph data={data} lineStyle={lineStyle} />
        </Chart>
    </Svg>
</cx>;

Answer 2

另一种将参数传递给控制器​​的方法，我发现它更具声明性，是使用控制器工厂函数并通过函数闭包使参数可用。这种方法的另一个好处是我们可以在控制器中使用自定义参数名称。

const LineChart = ({ data, chartStyle, lineStyle }) => <cx>
    <Svg style={chartStyle} controller={getController(chartStyle)}>
        <Chart offset="20 -20 -40 40" axes={{ x: { type: NumericAxis }, y: { type: NumericAxis, vertical: true } }}>
            <Gridlines/>
            <LineGraph data={data} lineStyle={lineStyle} />
        </Chart>
    </Svg>
</cx>;

// controller factory
function getController(style) { 
    return class MyController extends Controller {
        onInit() {
            // now `chartStyle` is available as `style` within controller via function closure
            console.log(style);
            ....
        }
    };
}