React：React 组件的 props 数量是否有可观的限制

Question

有时我的组件具有大量属性。

这有什么固有问题吗？

例如

render() {

  const { create, update, categories, locations, sectors, workTypes, organisation } = this.props; // eslint-disable-line no-shadow

  return (
    <div className="job-container">
      <JobForm
        organisationId={organisation.id}
        userId={user.id}
        action={action}
        create={create}
        update={update}
        categories={categories}
        locations={locations}
        sectors={sectors}
        workTypes={workTypes}
      />
    </div>
  );
}

最佳做法是什么？

Answer 1

除了冗长之外，它没有任何问题，但当然，这会使您的组件从根本上更难维护。

使它更通用的一种常见方法是改用扩展运算符，用 shorthand 传递所有这些道具。

<JobForm {...this.props} />

解决该问题的另一种方法是通过将组件拆分为更小、更集中的组件来分担组件的责任，这些组件可以改为组合。

Answer 2

我认为您刚刚发现了代码味道。任何时候你有那么多输入（道具）到一个函数（组件），你必须质疑，你如何用参数组合的所有排列来测试这个组件。使用 {...this.props} 传递它们只会减少打字，有点像在腐烂的尸体上喷洒 Febreeze。

我想问一下，为什么您同时拥有 create 和 update 方法，而不是提交方法？

您如何使用 organisationId 和 userId？如果只需要将这些传递给也传递进来的 create 和 update（或 submit）方法，为什么不传递它们并让 onCreate/ onUpdate 处理程序提供它们？

也许 JobForm 应该呈现为：

<JobForm /* props go here */>
   <CategoryDroplist categories=this.props.categories />
   <LocationDroplist locations=this.props.locations />
</JobForm>

在 JobForm 中你有 props.children 但这些是单独的组件，作为单独的组件可能没问题。

我只是没有足够的信息来回答这个问题，但是通过将你的组件分解成更简单的东西，道具的数量会减少，气味也会减少。

Answer 3

多年来，许多语言的风格指南都建议限制函数的参数数量。甚至 ESLint 也有关于此的规则并声明：“......可能难以读写，因为它需要记住每个参数是什么，它的类型以及它们应该出现的顺序。”。

我认为在 JSX 中也是如此。由于 JSX 是 JS 的 DSL，我们正在编译代码味道，有点。

Answer 4

不，在一个组件中使用 props 没有各自的限制，但我在一个组件中使用了 12 个 props

App.js component

import Map from './Map';

const arr = [1,2,3,4,5];
const arr1 = [1,2,3,4,5];
const arr2 = [1,2,3,4,5];
const arr3 = [1,2,3,4,5];
const arr4 = [1,2,3,4,5];
const arr5 = [1,2,3,4,5];
const arr6 = [1,2,3,4,5];
const arr7 = [1,2,3,4,5];
const arr8 = [1,2,3,4,5];
const arr9 = [1,2,3,4,5];
const arr10 = [1,2,3,4,5];
const arr11 = [1,2,3,4,5];
const arr12 = [1,2,3,4,5];
const arrAlpha = ['A','B','C','D'];

const App = () => {
  return (
    <>
     <h1>App page</h1>
     <Map 
      alpha = {arrAlpha} 
      numb={arr} 
      beta={arr1}
      gamma={arr2}
      delta={arr3}
      sigma={arr4}
      theta={arr5}
      sin={arr6}
      cos={arr7}
      sec={arr8}
      cosec={arr9}
      tan={arr10}
      cot={arr11}
      tri={arr12}
    />
    </>
  )
}

export default App

Map.js Component

const Map = (props) => {

const one = props.alpha;
let itemOne = one.map((items)=><li>{items}</li>) 

const two = props.numb;
let itemTwo = two.map((itemst)=><li>{itemst}</li>)

const three = props.beta;
let itemThree = three.map((beta)=><li>{beta}</li>)

const four = props.gamma;
let itemfour = four.map((gamma)=><li>{gamma}</li>)

const five = props.delta;
let itemfive = five.map((delta)=><li>{delta}</li>)

const six = props.sigma;
let itemSix = six.map((sigma)=><li>{sigma}</li>)

const seven = props.theta;
let itemSeven = seven.map((theta)=><li>{theta}</li>)

const eight = props.sin;
let itemEight = eight.map((sin)=><li>{sin}</li>)

const nine = props.cos;
let itemNine = nine.map((cos)=><li>{cos}</li>)

const ten = props.sec;
let itemTen = ten.map((sec)=><li>{sec}</li>)

const eleven = props.cosec;
let itemEleven = eleven.map((cosec)=><li>{cosec}</li>)

const twelve = props.tan;
let itemTwelve = twelve.map((tan)=><li>{tan}</li>)


return (
        <>
            <h1>React Map Items</h1>
            <ul>
                <li>{itemOne}</li>
                <li>{itemTwo}</li>
                <li>{itemThree}</li>
                <li>{itemfour}</li>
                <li>{itemfive}</li>
                <li>{itemSix}</li>
                <li>{itemSeven}</li>
                <li>{itemEight}</li>
                <li>{itemNine}</li>
                <li>{itemTen}</li>
                <li>{itemEleven}</li>
                <li>{itemTwelve}</li>    
            </ul>
            
        </>
    )
}

导出默认地图

React：React 组件的 props 数量是否有可观的限制

React: Are there respectable limits to number of props on react components

javascript

components

flux

reactjs

redux