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

Question

我学习 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;

Answer 1

除了我的评论之外，您的组件可能如下所示：

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>
);

Answer 2

据我了解，您可以将其解构如下

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;

Answer 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>)
      }

<errorComponent> - 它不会按预期工作，因为所有自定义组件都应以大写字母开头（如果不是，react 会将其视为内置 Html 标记）