如何对道具进行分组并使代码更具可读性？

Question

这是定义属性的唯一方法吗？

        <YAxis

            id="axis1"

            label="Requests"

            style={{ labelColor: scheme.requests }}

            labelOffset={-10}

            min={0}

            max={1000}

            format=",.0f"

            width="60"

            type="linear"

        />

如果有一长串的属性，这可能会很混乱。它使我想起了一些内联CSS，这可能变得很难阅读。

我们不能只是说：

var yAxis_props = ( id = ...  label = ... )

然后像这样插入它们：

<YAxis yAxis_props />

Answer 1

您可以使用传播算子实现类似的操作。let props={a:1, b:2}...<MyComponent {...props}/>

Answer 2

尽管这里的答案涵盖了有效且有效的传播方法，但我想提醒您，单个组件的道具过多可能表明该组件存在太多变化，这反过来使维护和扩展变得非常困难。在这种情况下，您可能会考虑有时使用的“渲染道具”或“以功能为生的孩子”的方法。这种方法使您可以将组件的逻辑和基本行为保持在一个地方，而使用它的开发人员可以在组合中使用它来改变组件渲染和与周围环境交互的方式。肯特·多德斯（Kent C. Dodds）在这里对此进行了精彩的演讲。