在这种情况下，如何在此处添加解构

问题描述

我学习React和JavaScript。我偶然发现了这个Eslint建议，我确实像图像警告建议那样进行了破坏，但是我应该在哪里添加。我尝试像const { errorComponent }= props;那样，但是在const

里面不起作用

代码：

import '../../styles/error.scss';

const Error = props => (
    <div className="error-message">
        {props.errorComponent ? <props.errorComponent {...props} /> : <p className="alert">Unable to preview file</p>}
    </div>
);

export default Error;

解决方法

除了我的评论，您的组件可能看起来像这样：

const Error = ({ errorComponent: Component,...props }) => (
  <div className="error-message">
    {Component ? (
      <Component {...props} />
    ) : (
      <p className="alert">Unable to preview file</p>
    )}
  </div>
);

一个更好的选择是改用children道具。

const Error = ({ children }) => (
  <div className="error-message">
    {children || <p className="alert">Unable to preview file</p>}
  </div>
);

,

据我了解，您可以对其进行破坏

const Error = props => {
  const {errorComponent,otherProperty} = props
  return (<div className="error-message">
      {errorComponent ? <errorComponent {otherProperty} /> : <p className="alert">Unable to preview file</p>}
  </div>)
}
  


export default Error;

,

尝试这种方法。

1
1
1
2
3
4
5
8.6
6
7
7
7
7
8
9
9
4.2
1
1
1
2
3

const Error = ({ errorComponent,...props }) => { const ErrorComponent = errorComponent; return (<div className="error-message"> {errorComponent ? <ErrorComponent {...props} /> : <p className="alert">Unable to preview file</p>} </div>) } -无法正常运行，因为所有自定义组件均应以印刷体字母开头（否则，react会将其视为内置HTML标记）>