如何将此If/if non语句转换为非if语句？

Question

所以我有这些if语句，我需要将它们转换为不使用开关情况/如果是其他语句，这是一个react应用程序。

{data.map((val, key) => {
            if (val.kg) {
              return (
                <div className="cardproductlist" key={key}>
                  <div className="valuescontainercheckbox pt-4 ml-3">
                    <input
                      class="delete-checkbox"
                      type="checkbox"
                      value={val.sku}
                      id={val.sku}
                      onChange={handleCheck}
                    />
                  </div>
                  <div className="valuescontainer">
                    <span> {val.name}</span>
                  </div>
                  <div className="valuescontainer">
                    <span> {val.price}$</span>
                  </div>
                  <div className="valuescontainer">
                    <span>{val.sku}</span>
                  </div>
                  <div className="valuescontainer">
                    <span className="pb-5">
                      <span>Weight: {val.kg} KG</span>
                    </span>
                  </div>
                </div>
              );
            } else if (val.mb) {
              return (
                <div className="cardproductlist" key={key}>
                  <div className="valuescontainercheckbox pt-4 ml-3">
                    <input
                      class="delete-checkbox"
                      type="checkbox"
                      value={val.sku}
                      id={val.sku}
                      onChange={handleCheck}
                    />
                  </div>
                  <div className="valuescontainer">
                    <span> {val.name}</span>
                  </div>
                  <div className="valuescontainer">
                    <span> {val.price}$</span>
                  </div>
                  <div className="valuescontainer">
                    <span>{val.sku}</span>
                  </div>
                  <div className="valuescontainer">
                    <span className="pb-5">
                      <span>Size: {val.mb} MB</span>
                    </span>
                  </div>
                </div>
              );
            } else if (val.length) {
              return (
                <div className="cardproductlist" key={key}>
                  <div className="valuescontainercheckbox pt-4 ml-3">
                    <input
                      class="delete-checkbox"
                      type="checkbox"
                      value={val.sku}
                      id={val.sku}
                      onChange={handleCheck}
                    />
                  </div>
                  <div className="valuescontainer">
                    <span> {val.name}</span>
                  </div>
                  <div className="valuescontainer">
                    <span> {val.price}$</span>
                  </div>
                  <div className="valuescontainer">
                    <span>{val.sku}</span>
                  </div>
                  <div className="valuescontainer">
                    <span className="pb-5">
                      <span>
                        Dimensions: {val.length}x{val.width}x{val.height}
                      </span>
                    </span>
                  </div>
                </div>
              );
            } else {
              return (
                <div className="cardproductlist" key={key}>
                  <div className="valuescontainercheckbox pt-4 ml-3">
                    <input
                      class="delete-checkbox"
                      type="checkbox"
                      value={val.sku}
                      id={val.sku}
                      onChange={handleCheck}
                    />
                  </div>
                  <div className="valuescontainer">
                    <span> {val.name}</span>
                  </div>
                  <div className="valuescontainer">
                    <span> {val.price}$</span>
                  </div>
                  <div className="valuescontainer pb-5">
                    <span>{val.sku}</span>
                  </div>
                </div>
              );
            }
          })}
        </div>

Answer 1

我不知道它是否是条件呈现的最佳实践，但是枚举可以用于它。

const elementStates = {
  kg: <YourKgElement />,
  mb: <YourMbElement />,
  default: <DefaultElement />
};

function YourElement({state}) {
  return <div>{elementStates[state]}</div>
}

Answer 2

我已经找到了一种方法，不用使用巨大的，如果是其他的块，这是目前的工作，

                    {val.kg ? <div>Weight: {val.kg} KG</div> : ''}
                    {val.mb ? <div>Size: {val.mb} MB</div> : ''}
                    {val.length ? (
                      <div>
                        Dimensions: {val.length}x{val.height}x{val.width}
                      </div>
                    ) : ''}
                  </span>```