如何有條件地將道具傳遞給 React JS 中的組件

Question

我有一個名為“Switch”的組件，它需要一些參數，例如 label、name、onChange、selected 等。

現在，在我的場景中，我正在調用 API 並獲得響應。 在 JSON 響應中，我的字段值為“是”或“否”。

如果值為“是”，我需要將“已切換”傳遞給組件，否則不傳遞任何內容。

          <Switch
            label={field.label}
            name={field.fieldID}
            disabled={field.disabled}
            onChange={this.getNextFields}
            checked
          >
            {field.control.modes[0].options.map((option, index) => {
              return (
                
                  <Strong>{option.key}</Strong>
                
              );
            })}
          </Switch>

我如何通過它？ 我正在嘗試使用三元運算符。 但沒有運氣。 您的幫助將不勝感激。

Answer 1

您可以在道具定義中使用三元運算符。

<Switch
  label={field.label}
  name={field.fieldID}
  disabled={field.disabled}
  onChange={this.getNextFields}
  checked={{ Yes: true, No: false }[field.value]}
>
  {field.control.modes[0].options.map((option, index) => {
    return <Strong>{option.key}</Strong>;
  })}
</Switch>

Answer 2

你可以試試這樣的 -

<Switch
  label={field.label}
  name={field.fieldID}
  disabled={field.disabled}
  onChange={this.getNextFields}
  checked={field.value === 'Yes' ? 'switched' : ''}
>
  {field.control.modes[0].options.map((option, index) => {
    return (               
      <Strong>{option.key}</Strong>
                    
    );
  })}
</Switch>