React中如何实现条件显示按钮且避免代码重复

解决方案 #

你完全不用拆分两个return分支写重复代码，直接在JSX内部对按钮做条件渲染即可。JSX中可以用&&短路运算符实现非view模式下才渲染按钮的逻辑，优化后的代码如下：

return (
  <>
    <section
      className={`col-md-${sectionInputArray.width} justify-content border-end mt-2 mb-2`}
    >
      <h4 className="border-bottom">{sectionInputArray.name} </h4>
      <div className="col-12"></div>
      {sectionInputArray.contents.map((input, i) => (
        <NestedDynamicInputCreation
          singleInput={input}
          formData={formData}
          setFormData={setFormData}
          options={options}
          mode={mode}
          staticVars={staticVars}
          SetStaticVars={SetStaticVars}
          i={i}
          idx={idx}
          arrayLength={arrayLength}
          sectionUID={sectionInputArray.UID}
        />
      ))} 

      {/* 非view模式才渲染操作按钮 */}
      {mode !== "view" && (
        <>
          {/* 新增字段按钮 */}
          <button
            id ="TestButton1"
            className="btn btn-primary bt-btn m-3"
            type="button"
            onClick={() => {
              let addedFormData = {
                ...formData,
                [`${sectionInputArray.UID}`]: [
                  ...formData[sectionInputArray.UID],
                  NestedListIDSingle(sectionInputArray),
                ],
              };
              let randomVal = Math.random()
                .toString(36)
                .substr(0, 11);
              let withRandom = {
                ...addedFormData,
                rand_value: randomVal,
              };
              setFormData(withRandom);
            }}
          >
            新增{sectionInputArray.name}
          </button>

          {/* 删除区块（已创建表单）按钮 */}
          <button
            className="btn btn-primary bt-btn m-3"
            type="button"
            onClick={() => {
              console.log(
                `${sectionInputArray.name}-${idx} 区块将被删除`
              );
              let newFD = { ...formData };
              newFD[sectionInputArray.UID].splice(idx, 1);
              let randomVal = Math.random()
                .toString(36)
                .substr(0, 11);
              let withRandom = {
                ...newFD,
                rand_value: randomVal,
              };
              setFormData(withRandom);
            }}
          >
            删除{sectionInputArray.name}
          </button>
        </>
      )}
    </section>
  </>
);

补充说明 #

• 你之前直接加if判断不生效，大概率是没有把JSX中的判断逻辑包裹在{}里，JSX内写JS表达式必须用大括号包裹才能被解析
• 上述代码还修正了原代码的一个隐藏问题：原代码let newFD = formData;是直接拷贝引用，修改newFD会直接修改原formData对象，改成let newFD = { ...formData };创建新对象避免副作用

内容的提问来源于stack exchange，提问作者IAmTazlan