在 React.js 中有条件地设置 html 属性

Posted 2023-03-05

【中文标题】在 React.js 中有条件地设置 html 属性

【英文标题】：Conditionally setting html attributes in React.js

【发布时间】：2015-03-01 07:10:14

【问题描述】：

我在为 React 中的单选按钮组件设置默认选项时遇到了令人惊讶的困难。

这是我的RadioToggle 组件：

/** @jsx React.DOM */
var RadioToggle = React.createClass(
  render: function () 
    var self = this;
    return (
      <div className="RadioToggle">
        this.props.radioset.radios.map(function(radio, i)
          return (
            <label className="__option" key=i>
              <h3 className="__header">radio.label</h3>

              radio.checked ?
                <input className="__input"
                     type="radio"
                     name=self.props.radioset.name
                     value=radio.value
                     defaultChecked />

              : <input className="__input"
                     type="radio"
                     name=self.props.radioset.name
                     value=radio.value />
              

              <span className="__label"></span>
            </label>
            )
          )
        
      </div>
    );
  
);

module.exports = RadioToggle;

这是我创建组件的方式：

<RadioToggle radioset=
  
    name: "permission_level",
    radios: [
    
      label: "Parent",
      value: 1,
      checked: false
    ,
    
      label: "Child",
      value: 0,
      checked: true
    
  ]
/>

上述代码有效，但我们不喜欢根据radio.checked 选项生成几乎相同的代码。

组件的设置方式，我向它传递一个名称和一个要创建的收音机数组，并为收音机数组中的每个对象使用该数据来创建一个单选按钮。

在其他情况下，我可以通过将三元语句作为值来有条件地设置属性，如下所示，但这在这里不起作用。

defaultChecked=radio.checked ? "checked" : "" 的问题在于，即使一个单选按钮上的输出变为 checked="checked" 和另一个单选按钮上的 checked，它也会默认选中两个单选按钮，导致最后一个 实际上 正在检查中。

再一次，上面的组件可以工作，但我希望对 React 有更多经验的人能有一种更简洁的方式来做这件事，而不是生成除了那个属性之外几乎相同的元素。

【问题讨论】：

您可以将上下文作为第二个参数传递给map，而不是使用var self = this。 this.props.radioset.radios.map(..., this);.

【参考方案1】：

checked/defaultChecked 采用布尔值，而不是字符串。

<input className="__input"
     type="radio"
     name=self.props.radioset.name
     value=radio.value
     defaultChecked=radio.checked />

jsbin demo

旁注：避免使用 defaultChecked/defaultValue 并使用 check/value 和 onChange。

【讨论】：

您的 bin 为我抛出了一个错误，但我确实将选中的 prop 设置为布尔值（编辑：nvm 我看到了您引用的示例）。 checked 本身在 html 中没有任何值，甚至 checked=false 仍然将元素标记为默认值，所以我在假设它在 React 中是相同的情况下进行操作。我可以发誓我尝试了你的建议，但你是对的，React 中的defaultChecked=false 不会输出单独的checked 属性或checked=false，所以这可以正常工作。你介意详细说明你的旁注吗？您将如何使用 onChange 来标记默认值？

您将数据保持在已检查状态，并在用户更改它时更新它，这会导致 UI 更新，并且一切都按预期工作。但是，您可以根据该状态另外渲染其他内容，例如选择某个值时的额外表单字段，或者您可以将数据发送到其他地方，例如在单击按钮时向服务器发出 ajax 发布请求。

为什么要避免 defaultChecked/defaultValue？

不太清楚，你经常要么直接修改dom，要么重写它以使用value/onChange。它还让<input> 和<MyCustomInput> 组件之间没有区别，API 明智。最好从一开始就一直这样做。

此页面描述了 React 方法：facebook.github.io/react/docs/forms.html