学习者问题：如何有条件地为此特定代码设置包装器。 React/SPFX

Question

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

我已经完全阅读但仍然不知道如何用我的代码实现它。编辑 post 解决方案：我相信这个问题与上面的问题非常相似，但它使用 Fade 包装器而不是 href link.

这是渲染块：

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

学习者问题：如何有条件地为此特定代码设置包装器。 React/SPFX

Learner Question: How to conditionally set wrapper for this particular code. React/SPFX

javascript

jsx

reactjs

spfx