Javascript 如何将道具分组并使代码更具可读性？

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

        <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=…）

然后像这样插入它们：

您可以使用spread运算符来实现类似的操作

let props={a:1, b:2}

...

<MyComponent {...props}/>

let props={a:1，b:2}
...

可以这样做，将

yAxis\u props

定义为包含所有键值的对象。像这样：

var yAxis_props = {
  id: '',
  label: ''
}

然后将所有值作为单独的道具传递，如下所示：

<YAxis
  {...yAxis_props}
/>

转换形式：

function ComponentA() {
  return react("div", null, "Hello");
}

function ComponentB() {
  return react(
    "div",
    null,
    react(A, {
      id: "a",
      label: "b"
    }),
    react(A, {
      id: "a",
      label: "b"
    })
  );
}

---

虽然这里的答案涵盖了传播方法，这是有效的，而且效果很好，但我想提醒大家，对于单个组件来说，拥有太多的道具可能意味着该组件存在太多的变化，这反过来又使得维护和扩展变得非常困难

在这种情况下，你想考虑“孩子是函数”的方法，有时称为“函数”。 这种方法允许您将组件逻辑和基本行为放在一个地方，而使用它的开发人员可以在组合中使用它来改变组件呈现和与环境交互的方式。 关于这件事，有一个很棒的演讲

---

希望这有帮助：）

奇怪，我在想一种更JSX类型的语法。所以你在一个对象上使用扩展操作符？@TMvytKA9LgSVZ8Z7 AFAIK这是你能得到的最接近你想要的。是的，你使用了排列。所以这里发生的是，排列操作符把对象变成一个数组？哪个JSX解释像道具？不，它不会将对象转换为数组，它基本上会将每个键作为一个单独的道具传递，它将与

（书写相同的较短方式）相同奇怪，我在日志中得到这样的结果：{id:''，标签：'}没有看到等号here@TMvytKA9LgSVZ8Z7看，事情是，我们编写的jsx将在

React.createElement（组件、道具、子项）

中进行转换，因此道具将成为这里的一个对象。您可以通过，或者transpiler将为您创建一个。

function ComponentA () {
   return( <div>Hello</div> )
}

function ComponentB() {
   return (
        <div>
            <A id='a' label='b' />
            <A {...{id:'a', label:'b'}} />
        </div>
   )
}

function ComponentA() {
  return react("div", null, "Hello");
}

function ComponentB() {
  return react(
    "div",
    null,
    react(A, {
      id: "a",
      label: "b"
    }),
    react(A, {
      id: "a",
      label: "b"
    })
  );
}