Question

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

喜欢https://docs.cxjs.io/concepts/functional-components

我让我们说一个待办事项列表应用程序，带有数据绑定和todo条目组件的列表组件，但该条目有很多逻辑，它有自己的控制器。

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

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

CXJS使用Controller中的参数

2 个答案: