Question

我正在尝试创建一个用户界面，允许用户从其计算机下载文件以创建音频播放列表。我正在尝试使用const li = <li ref={this.liRef}></li>附加在javascript代码中创建的孩子。由于某些原因，当我尝试在其上附加ulRefNode.appendChild(li);和ulRefNode.appendChild(liNode);时，此方法将不起作用。 const liNode还返回null。 li和liNode节点元素吗？这是代码：

    class Download extends React.Component {

    constructor(props) {
     super(props)

     this.handleClick = this.handleClick.bind(this);

     this.inputRef = React.createRef();


     this.ulRef = React.createRef();

     this.destinationRef = React.createRef();

     this.liRef = React.createRef();



    }

       handleClick = () => {

    const node = this.inputRef.current;
    const destNode = this.destinationRef.current;
    const ulRefNode = this.ulRef.current;

    const liNode = this.liRef.current;

node.addEventListener('change', function() {
    var file;

    var ulAlreadyAdded = true;


for(var x = 0, xlen = this.files.length; x < xlen; x++) {
 console.log(this.files[x]);
 file = this.files[x];





   var reader = new FileReader();
   reader.onload = (e) => {




    const li = <li ref={this.liRef}></li>



    console.log("LINODE " + liNode);




    ulRefNode.appendChild(liNode);




}

reader.readAsDataURL(file);



 };   





});

};






render() {
return(

<div className="input">
<input onClick={this.handleClick} id="upload-file" className="inputName" type="file" multiple ref={this.inputRef}/>
<ReactAudioPlayer
  src="my_audio_file.ogg"
  autoPlay
  controls
/>
<div ref={this.destinationRef} id="destinationID"></div>
<ul ref={this.ulRef}></ul>


<output id="list"></output>









</div>

)


};





 }





    export default Download;

Answer 1

据我所知，您要实现的目标并不意味着要像使用React那样完成。

在React中，您应该（在这种情况下）从所需的任何源读取数据，将其加载到状态中，然后呈现要向用户显示的UI。

我建议在继续之前先看一下React教程：https://reactjs.org/tutorial/tutorial.html

为了快速了解React组件的外观，我整理了一个小示例：

import React from 'react';

class Download extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      files: [],
    };
  }

  componentDidMount {
    // Fetch your data (possibly asynchronously) and 
    // update the component state, which will cause
    // the component to re-render
    this.setState({
      files: [{ name: 'File A' }, { name: 'File B' }],
    });
  }

  render() {
    return (
      <ul>
        {this.state.files.map((file, index) => (
          <li key={index}>
            {file.name}
          </li>
        ))}
      </ul>
    );
  }
}

请为可能偶然发现此问题的人提供注意：请注意，我在此代码段中使用了一些可能不被视为最佳实践的做法，但有助于简化代码的解释（例如，{{1} }，并在渲染方法的循环中将setState用作index。

TypeError：无法在“节点”上执行“ appendChild”：参数1的类型不是“节点”。尝试附加react元素时

1 个答案: