在加载组件之前检查 prop 值答案

【问题标题】：Check prop values before loading component在加载组件之前检查 prop 值
【发布时间】：2021-05-18 00:13:03
【问题描述】：

我有一个简单的 React 组件，它可以将富文本编辑器 TinyMCE 的实例注入任何页面。

它正在工作，但有时一个错误的 prop 值会通过并导致错误。

我想知道，是否有办法在加载页面上的其他内容之前检查 planetId 或 planetDescriptor 的值是否为空或 null。

我尝试将所有代码包装在此：

if(props)
{
    const App = (props) => { ... }
}

但这总是抛出这个错误：

ReferenceError: props is not defined

有没有办法在我完成加载组件之前检查 props 中的某些值？

谢谢！

这是应用程序：

const App = (props) => {
    const [planetDescriptor, setPlanetDescriptorState] = useState(props.planetDescriptor || "Planet Descriptor...");
    const [planetId, setPlanetIdState] = useState(props.planetId);
    const [planet, setPlanetState] = useState(props.planet);
    const [dataEditor, setDataEditor] = useState();

    const handleEditorChange = (data, editor) => {
        setDataEditor(data);
    }

    const updatePlanetDescriptor = (data) => {
        const request = axios.put(`/Planet/${planetId}/planetDescriptor`);
    }

    return (
        <Editor
            id={planetId.toString()}
            initialValue={planetDescriptor}
            init={{
                selector: ".planetDescriptor",
                menubar: 'edit table help'
            }}
            value={dataEditor}
            onEditorChange={handleEditorChange}
        />
    )
}

export default App;

【问题讨论】：

你可以有条件地渲染你的组件，除非我错过了你的问题 {planetDescriptor && planetId && }

标签： javascript reactjs tinymce

【解决方案1】：

您在条件句中的想法是正确的。只需要把它放在组件内部而不是包裹整个东西。您可以尝试的类似于react docs for conditional rendering 的示例。它的作用是检查 props = null / undefined 是否然后返回或呈现错误状态。否则返回编辑器。

    if (!props) {
      return <h1>error state</h1>
    }
    return <Editor></Editor>

【讨论】：

【解决方案2】：

在使用 JSX 时，您不能以尝试的方式包装代码，而不是普通的 javascript，因此您不能在那里使用 if 语句。

我建议使用三元，像这样：

const SomeParentComponent = () => {
  const propsToPass = dataFetchOrWhatever;

  return (
    <>
      {propsToPass.planetDescriptor && propsToPass.planetId ?
        <App
          planetDescriptor={propsToPass.planetDescriptor}
          planetId={propsToPass.planetId}
          anyOtherProps={???}
        /> :
        null
      }
    </>
  )
};

这将有条件地渲染 App 组件，前提是这两个 props 都存在。

你也可以使用&&来达到同样的效果：

... code omitted ...
{propsToPass.planetDescriptor && propsToPass.planetId &&
  <App
    planetDescriptor={propsToPass.planetDescriptor}
    planetId={propsToPass.planetId}
    anyOtherProps={???}
  />
}
... code omitted ...

您使用哪种方法很大程度上取决于偏好和代码库的一致性。

【讨论】：