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}
	/>

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"));

Answer 2

这将起作用

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

如何根据条件在输入元素中添加动态属性？

2 个答案: