reactjs - 如何根据条件将动态属性添加到输入元素中？

Question

以下是将根据条件加载的两个输入元素的片段？有一个名称 props，它会根据 props 的值加载输入。

在这里，如果名称包含某个值，那么它将使用属性maxlength="10"加载第一个输入，并且该属性的其余部分将保持不变。

这里我的问题是如何优化代码以便删除一个输入元素，我只想要一个输入元素。

任何帮助都会很棒。

const name = {this.props}
{ name === "xyz" ?

<input
	  type={type || 'text'}
	  name={name}
	  onBlur={onBlur}
	  onChange={onChange}
	  onDragStart={onDragStart}
	  onDrop={onDrop}
	  onFocus={onFocus}
	  maxlength="10"
	  value={value}
	  disabled={disabled}
	  className={[className, disabled ? 'disabled' : ''].join(' ')}
	  placeholder={placeholder}
	  min={min}
	/>
:

<input
	  type={type || 'text'}
	  name={name}
	  onBlur={onBlur}
	  onChange={onChange}
	  onDragStart={onDragStart}
	  onDrop={onDrop}
	  onFocus={onFocus}
	  value={value}
	  disabled={disabled}
	  className={[className, disabled ? 'disabled' : ''].join(' ')}
	  placeholder={placeholder}
	  min={min}
	/>

标签： reactjsjsx

Answer 1

试试这个：

...

function App() {
  const name = "abc";
  ...

  const attribs = {
    type: type || "text",
    name: name,
    ...
    className: [className, disabled ? "disabled" : ""].join(" "),
    ...
  };

  if (name === "xyz") {
    attribs["maxLength"] = "10";
  }

  return (
    <div>
      <input {...attribs} />
    </div>
  );
}

render(<App />, document.getElementById("root"));