如何从 json 道具在 React 输入组件中设置动态属性答案

【问题标题】：How to set dynamic attributes in React Input Component from json props如何从 json 道具在 React 输入组件中设置动态属性
【发布时间】：2021-07-27 11:47:28
【问题描述】：

我使用了可重用的输入组件并将 JSON 属性作为道具发送到输入组件当我在组件中使用它时，它只显示 JSON 数组中的一个属性。

形式：

             <InputField value={allValues.new_password}
                  name="new_password"
                  type="password"
                  placeholder="Enter New Password"
                  required={true}
                  id="new_password"
                  onChange={handleChange("new_password")}
                  attributes={[
                    {
                      name: "data-parsley-equalto",
                      value: "#confirm_password"
                    },
                    {
                      name: "data-parsley-errors-container",
                      value: "#password-errors"
                    }
                  ]}
                />

在输入组件中

      for (let i = 0; i < props.attributes.length; i++) {
        var attr_name = props.attributes[i].name;
        var attr_value = props.attributes[i].value;
        setAttributes({
          ...attributes,
          [attr_name]: "" + attr_value + ""
        });
      }
    }

        <input
          type={type}
          value={value}
          className="form-control"
          placeholder={placeholder}
          onChange={handleChange}
          name={name}
          id={id}
          required={required}
          {...attributes}
        />

当我检查它时只显示一个属性

<input type="password" class="form-control" placeholder="Please Confirm password" name="confirm_password" id="confirm_password" required="" value="" data-parsley-errors-container="#confirm_password-errors">

有人帮我解决这个问题吗？

【问题讨论】：

标签： javascript reactjs react-component

【解决方案1】：

似乎您错过了循环中迭代属性的相等性；

for (let i = 0; i <= props.attributes.length; i++) {
...

【讨论】：

我认为没有问题。
@MeghrajShiradwade，你试过了吗？我的意思是不相等的循环不会返回数组中的最后一个属性。
是的，我试过了。我们只有两个元素。第 0 个索引和第 1 个索引。所以小于条件是可以的。