Question

我正在尝试使用appendChild将fontawesome图标添加到ref中的引用中。我收到错误消息：

无法在“节点”上执行“ appendChild”：参数1的类型不是“节点”。

使用append代替appendChild只能添加文本。

class示例扩展了React.Component {

var     mongoose          = require("mongoose");
var passportLocalMongoose = require("passport-local-mongoose");


var UserSchema = new mongoose.Schema({
    username: {type: String, unique: true, required: true},
    password: String,
    avatar: String,
    firstName: String,
    lastName: String,
    email: {type: String, unique: true, required: true},
    resetPasswordToken: String,
    resetPasswordExpires: Date,
    isAdmin: {type: Boolean, default: false}
});

UserSchema.plugin(passportLocalMongoose);

module.exports= mongoose.model("User",UserSchema);

}

Answer 1

考虑稍微改变一下方法。您可以通过以下代码获得与预期相同的结果，并且在React中使用状态和条件JSX更为常见：

class Example extends React.Component {
  state = { images: [] }

  handle = () => {
    this.setState({ images: [...images, 'fas fa-minus-circle'] });
  }

  render() {
    return (
      <div className="container">
        <button onClick={this.handle}>CLICK HERE</button>
        {this.state.images.map((image, index) => {
          <i key={index} className={image} />
        })}
      </div>
    );
  }
}

Answer 2

您可以创建引用并将其附加到要添加图标的元素上。

class Example extends React.Component{

    constructor(props){
     super(props);
     this.iconRef= React.createRef();
    }

    handle = (e) => {
    e.prenventDefault();
    this.iconRef.current.appendChild('<i className="fas fa-minus-circle"/>')
    }

render() {
    return (
        <div className="container">
            <button ref={this.iconRef} onClick={this.handle}>CLICK HERE</button>
        </div>
    )
}

}

React.js-如何将超赞的字体图标添加到引用

2 个答案: