CXJS在控制器中使用参数

Question

如何在功能组件的控制器中使用参数？

像https://docs.cxjs.io/concepts/functional-components一样

假设我做了一个待办事项列表应用程序，它有一个带有数据绑定的列表组件和一个待办事项条目组件，但是条目具有如此多的逻辑，以至于它有自己的控制器。

如何像文档的增强示例那样访问控制器中的这些参数：

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