向React中的Button组件添加disable属性

Question

我不知道如何在React中禁用自定义button组件的按钮。我希望它是有条件的，这样它只在单词写入时禁用。

<Button disabled>Disabled</Button>

Answer 1

下面是一个按钮组件的工作示例：https://codesandbox.io/s/y08xk0vzxz

下面是代码：

function Button({ disabled, children }) {
  return <button disabled={disabled}>{children}</button>;
}

您可以检查log in codesanbox，并看到默认情况下，如果为JSX中的值指定了noting，则prop的值被设置为true。

Answer 2

let isEmpty = true;

<Button disabled={isEmpty}>Disabled</Button>

此处，disabled的默认值为true。我们还可以根据需要传递条件值