如何为函数添加if-else条件或三元运算符？React-beautiful-dnd组件问题

云上老周

2026-8-1

解决React中仅当类型为card时显示InputBase组件的问题

先排查核心问题

首先确认你的类型变量是否正确传递、判断逻辑是否准确——很多时候条件不生效是因为变量值和预期不符，比如类型是"Card"（首字母大写）但你判断的是"card"，或者变量根本没拿到正确值。

正确的条件渲染写法

以下是几种靠谱的实现方式，都是React中常用的条件渲染手段：

直接在JSX中使用与运算符简化判断

import { InputBase } from 'react-beautiful-dnd';

// 假设你的类型变量是type
const YourComponent = ({ type }) => {
  return (
    <div>
      {/* 第一个InputBase始终显示 */}
      <InputBase placeholder="第一个输入框" />
      {/* 仅当type为card时显示第二个 */}
      {type === 'card' && <InputBase placeholder="第二个输入框" />}
    </div>
  );
};

使用if-else提前声明组件

const YourComponent = ({ type }) => {
  let secondInput = null;
  if (type === 'card') {
    secondInput = <InputBase placeholder="第二个输入框" />;
  }

  return (
    <div>
      <InputBase placeholder="第一个输入框" />
      {secondInput}
    </div>
  );
};

封装成子组件做条件判断（适合复杂场景）

const SecondInput = ({ show }) => {
  if (!show) return null;
  return <InputBase placeholder="第二个输入框" />;
};

const YourComponent = ({ type }) => {
  return (
    <div>
      <InputBase placeholder="第一个输入框" />
      <SecondInput show={type === 'card'} />
    </div>
  );
};