ESLint 样式

外观

@stylistic/

jsx-wrap-multilines ​

禁止在多行 JSX 周围缺少括号。

用括号包装多行 JSX 可以提高可读性和/或便利性。

规则详情 ​

此规则可选地接受一个以对象形式的第二个参数，其中包含应用规则的位置。默认情况下，将检查下面列出的所有语法，除了声明或赋值、逻辑表达式和 JSX 属性之外的条件，但这些条件可以明确禁用。对象中缺少的任何语法类型将遵循下面显示的默认行为。

json
{
  "declaration": "parens",
  "assignment": "parens",
  "return": "parens",
  "arrow": "parens",
  "condition": "ignore",
  "logical": "ignore",
  "prop": "ignore",
  "propertyValue": "ignore"
}

注意：默认情况下，在声明或赋值中检查条件。

规则选项 ​

此规则的错误代码示例，当配置为parens或parens-new-line时

jsx
var Hello = createReactClass({
  render: function() {
    return <div>
      <p>Hello {this.props.name}</p>
    </div>;
  }
});

此规则的错误代码示例，当配置为parens-new-line时

jsx
var Hello = createReactClass({
  render: function() {
    return (<div>
      <p>Hello {this.props.name}</p>
    </div>);
  }
});

此规则的正确代码示例

jsx
var singleLineJSX = <p>Hello</p>

var Hello = createReactClass({
  render: function() {
    return (
      <div>
        <p>Hello {this.props.name}</p>
      </div>
    );
  }
});

declaration ​

此规则的错误代码示例，当配置为{ declaration: "parens" }时

jsx
var hello = <div>
  <p>Hello</p>
</div>;

此规则的正确代码示例，当配置为{ declaration: "parens" }时

jsx
var hello = (
  <div>
    <p>Hello</p>
  </div>
);
jsx
var hello = (<div>
  <p>Hello</p>
</div>);

此规则的错误代码示例，当配置为{ declaration: "parens-new-line" }时

jsx
var hello = <div>
  <p>Hello</p>
</div>;
jsx
var hello = (<div>
  <p>Hello</p>
</div>);

此规则的正确代码示例，当配置为{ declaration: "parens-new-line" }时。

jsx
var hello = (
  <div>
    <p>Hello</p>
  </div>
);

assignment ​

此规则的错误代码示例，当配置为{ assignment: "parens" }时。

jsx
var hello;
hello = <div>
  <p>Hello</p>
</div>;

此规则的正确代码示例，当配置为{ assignment: "parens" }时。

jsx
var hello;
hello = (
  <div>
    <p>Hello</p>
  </div>
);
jsx
var hello;
hello = (<div>
  <p>Hello</p>
</div>);

当配置为 { assignment: "parens-new-line" } 时，此规则的错误代码示例。

jsx
var hello;
hello = <div>
  <p>Hello</p>
</div>;
jsx
var hello;
hello = (<div>
  <p>Hello</p>
</div>);

当配置为 { assignment: "parens-new-line" } 时，此规则的正确代码示例。

jsx
var hello;
hello = (
  <div>
    <p>Hello</p>
  </div>
);

return ​

当配置为 { return: "parens" } 时，此规则的错误代码示例。

jsx
function hello() {
  return <div>
    <p>Hello</p>
  </div>;
}

当配置为 { return: "parens" } 时，此规则的正确代码示例。

jsx
function hello() {
  return (
    <div>
      <p>Hello</p>
    </div>
  );
}
jsx
function hello() {
  return (<div>
    <p>Hello</p>
  </div>);
}

当配置为 { return: "parens-new-line" } 时，此规则的错误代码示例。

jsx
function hello() {
  return <div>
    <p>Hello</p>
  </div>;
}
jsx
function hello() {
  return (<div>
    <p>Hello</p>
  </div>);
}

当配置为 { return: "parens-new-line" } 时，此规则的正确代码示例。

jsx
function hello() {
  return (
    <div>
      <p>Hello</p>
    </div>
  );
}

arrow ​

当配置为 { arrow: "parens" } 时，此规则的错误代码示例。

jsx
var hello = () => <div>
  <p>World</p>
</div>;

当配置为 { arrow: "parens" } 时，此规则的正确代码示例。

jsx
var hello = () => (
  <div>
    <p>World</p>
  </div>
);
jsx
var hello = () => (<div>
  <p>World</p>
</div>);

当配置为 { arrow: "parens-new-line" } 时，此规则的错误代码示例。

jsx
var hello = () => <div>
  <p>World</p>
</div>;
jsx
var hello = () => (<div>
  <p>World</p>
</div>);

当配置为 { arrow: "parens-new-line" } 时，此规则的正确代码示例。

jsx
var hello = () => (
  <div>
    <p>World</p>
  </div>
);

condition ​

当配置为 { condition: "parens" } 时，此规则的错误代码示例。

jsx
<div>
  {foo ? <div>
      <p>Hello</p>
    </div> : null}
</div>

当配置为 { condition: "parens" } 时，此规则的正确代码示例。

jsx
<div>
  {foo ? (<div>
      <p>Hello</p>
  </div>) : null}
</div>
jsx
<div>
  {foo ? (
    <div>
      <p>Hello</p>
    </div>
  ): null}
</div>

当配置为 { condition: "parens-new-line" } 时，此规则的错误代码示例。

jsx
<div>
  {foo ? <div>
      <p>Hello</p>
    </div> : null}
</div>
jsx
<div>
  {foo ? (<div>
      <p>Hello</p>
  </div>) : null}
</div>

当配置为 { condition: "parens-new-line" } 时，此规则的正确代码示例。

jsx
<div>
  {foo ? (
    <div>
      <p>Hello</p>
    </div>
  ): null}
</div>

logical ​

当配置为 { logical: "parens" } 时，此规则的错误代码示例。

jsx
<div>
  {foo &&
    <div>
      <p>Hello World</p>
    </div>
  }
</div>

当配置为 { logical: "parens" } 时，此规则的正确代码示例。

jsx
<div>
  {foo &&
    (<div>
      <p>Hello World</p>
    </div>)
  }
</div>
jsx
<div>
  {foo && (
    <div>
      <p>Hello World</p>
    </div>
  )}
</div>

当配置为 { logical: "parens-new-line" } 时，此规则的错误代码示例。

jsx
<div>
  {foo &&
    <div>
      <p>Hello World</p>
    </div>
  }
</div>
jsx
<div>
  {foo &&
    (<div>
      <p>Hello World</p>
    </div>)
  }
</div>

当配置为 { logical: "parens-new-line" } 时，此规则的正确代码示例。

jsx
<div>
  {foo && (
    <div>
      <p>Hello World</p>
    </div>
  )}
</div>

prop ​

当配置为 { prop: "parens" } 时，此规则的错误代码示例。

jsx
<div foo={<div>
    <p>Hello</p>
  </div>}>
  <p>Hello</p>
</div>;

当配置为 { prop: "parens" } 时，此规则的正确代码示例。

jsx
<div foo={(<div>
    <p>Hello</p>
  </div>)}>
  <p>Hello</p>
</div>;
jsx
<div foo={(
  <div>
    <p>Hello</p>
  </div>
)}>
  <p>Hello</p>
</div>;

当配置为 { prop: "parens-new-line" } 时，此规则的错误代码示例。

jsx
<div foo={<div>
    <p>Hello</p>
  </div>}>
  <p>Hello</p>
</div>;
jsx
<div foo={(<div>
    <p>Hello</p>
  </div>)}>
  <p>Hello</p>
</div>;

当配置为 { prop: "parens-new-line" } 时，此规则的正确代码示例。

jsx
<div foo={(
  <div>
    <p>Hello</p>
  </div>
)}>
  <p>Hello</p>
</div>;

propertyValue ​

当配置为 { propertyValue: "parens" } 时，此规则的错误代码示例。

jsx
var hello = {
  foo: <div>
    <p>Hello</p>
  </div>
};

当配置为 { propertyValue: "parens" } 时，此规则的正确代码示例。

jsx
var hello = {
  foo: (
    <div>
      <p>Hello</p>
    </div>
  )
};