Skip to content

noSolidDestructuredProps

¥Summary

¥How to configure

biome.json
{
"linter": {
"rules": {
"correctness": {
"noSolidDestructuredProps": "error"
}
}
}
}

¥Description

禁止在 Solid 项目中解构 JSX 组件内的 props。

¥Disallow destructuring props inside JSX components in Solid projects.

在 Solid 中,必须使用 props 并结合属性访问(props.foo)来保持响应式。

¥In Solid, props must be used with property accesses (props.foo) to preserve reactivity.

¥Examples

¥Invalid

let Component = ({}) => <div />;
code-block.jsx:1:18 lint/correctness/noSolidDestructuredProps ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

You cannot destructure props.

> 1 │ let Component = ({}) => <div />;
^^
2 │

In Solid, props must be used with property accesses (props.foo) to preserve reactivity.

Remove the destructuring and use props.foo instead.

let Component = ({ a: A }) => <div a={A} />;
code-block.jsx:1:39 lint/correctness/noSolidDestructuredProps ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

This variable shouldn’t be destructured.

> 1 │ let Component = ({ a: A }) => <div a={A} />;
^
2 │

This is where the props were destructured.

> 1 │ let Component = ({ a: A }) => <div a={A} />;
^^^^^^^^
2 │

In Solid, props must be used with property accesses (props.foo) to preserve reactivity.

Remove the destructuring and use props.foo instead.

let Component = ({ prop1 }: Props) => <div p1={prop1} />;
code-block.tsx:1:48 lint/correctness/noSolidDestructuredProps ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

This variable shouldn’t be destructured.

> 1 │ let Component = ({ prop1 }: Props) => <div p1={prop1} />;
^^^^^
2 │

This is where the props were destructured.

> 1 │ let Component = ({ prop1 }: Props) => <div p1={prop1} />;
^^^^^^^^^
2 │

In Solid, props must be used with property accesses (props.foo) to preserve reactivity.

Remove the destructuring and use props.foo instead.

¥Valid

let Component = (props) => <div />;
let Component = (props) => <div a={props.a} />;

¥Related links