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

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

Yes 可以做到这一点，将 yAxis_props 定义为具有所有键值的对象。像这样:

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

然后使用 spread operator将所有值作为单独的 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"
    })
  );
}