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

是的，可以将其定义yAxis_props为具有所有键值的对象。像这样：

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

然后使用传播运算符将所有值作为单独的prop传递，如下所示：

<YAxis
  {...yAxis_props}
/>

检查React Doc。

好的，您对这两种方式感到困惑：

// first way
<Component id='', label='' />

// second way
const obj = { id:'', label: ''}
<Component {...obj} />

背后的场景都是一样的。检查这两种方式的Babel repl输出。我们写jsx，这将被转换成React.createElemet(component/html tag, props, children)。

码：

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