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

是的，可以将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"
    })
  );
}

Answer 2

您可以使用传播运算符achieve进行类似操作。

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

...

<MyComponent {...props}/>

Answer 3

虽然这里的答案涵盖了有效且有效的传播方法，但我想提醒您，单个组件的道具过多可能表明该组件存在太多变化，这反过来使得很难做到保持和扩展。

在这种情况下，您可能会考虑有时称为Render Props或“子项作为函数”的方法。

这种方法使您可以将组件的逻辑和基本行为放在一个地方，而使用它的开发人员可以将其组合使用，以改变组件渲染和与周围环境交互的方式。 Kent C. Dodds对此here进行了精彩的演讲。

希望这会有所帮助：）

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

3 个答案: