javascript - 学习者问题 : How to conditionally set wrapper for this particular code. React/SPFX

Question

我正在尝试申请 <Fade />渲染中的代码块，但前提是 this.state.ContextNewJobFade 为 false。

我已阅读 How do I conditionally wrap a React component?完全不知道如何用我的代码实现它。编辑帖子解决方案:我相信这个问题与上面的问题非常相似，但它使用 Fade 包装器而不是 href 链接。

这是渲染中的 block :

<div>
{this.state.ContextNewJobFade === false ?
  <Fade>
    <Label className={styles.questionTitle1}>Text:</Label>
    <br />

    <div className={styles.questionDescription}>
      Text
      <br />
    </div>
    <br />
    <TextField
      name="txtContextNewJobCode"
      multiline
      resizable={false}
      value={this.state.ContNewJobCode}
      onChange={this._onContNewJobCodeChng}
    />
  </Fade>
) : (
  <div>
    <Label className={styles.questionTitle1}>Some Text</Label>
    <br />

    <div className={styles.questionDescription}>
      Text
      <br />
    </div>
    <br />
    <TextField
      name="txtContextNewJobCode"
      multiline
      resizable={false}
      value={this.state.ContNewJobCode}
      onChange={this._onContNewJobCodeChng}
    />
  </div>
);

如您所见，我在此处复制代码并需要更好的解决方案。

Answer 1

这是我如何重构您的组件，希望它有所帮助!

const FadeComponent = ({ fade, children }) =>
  fade ? <Fade>{children}</Fade> : children;

const MyComponent = () => {
  return (
    <FadeComponent fade={this.state.ContextNewJobFade}>
      <Label className={styles.questionTitle1}>Text:</Label>
      <br />

      <div className={styles.questionDescription}>
        Text
        <br />
      </div>
      <br />
      <TextField
        name='txtContextNewJobCode'
        multiline
        resizable={false}
        value={this.state.ContNewJobCode}
        onChange={this._onContNewJobCodeChng}
      />
    </FadeComponent>
  );
};