javascript - 如何在我的类中修改一个数组并在类之外获取它的新输出？

Question

let arr = []

class Test extends React.Component {
   handleConvertString = (event) => {
    let str = this.inputRef.value;
    let solutions = ['abb','klopp','lopp','hkhk','g','gh','a'] // Returnsolutions()
    if (solutions.includes(str))
    {
        if (arr.includes(str))
        {
            alert("Answer already found");
        }else{
            arr.push(str)
        }
    }

    }
}

请注意，一些代码已被遗漏，但概述了我遇到的核心问题。

在这段代码中，我需要获取我的 arr(array) 的新内容并返回并在我的类之外访问它。执行此操作后，我还需要能够将其抽象为不同的文件以供使用。

我怎样才能做到这一点？

标签： javascriptnode.jsreactjsnpmjsx

Answer 1

有不同的方法可以做到这一点。在这里你可以按照 props 的方法来解决你的问题。

您必须将值作为道具传递给其他组件才能访问该组件之外的数组的值。

下面的示例将对您有所帮助。我在您的代码中做了一些变化以适合自己。逻辑将保持不变，您可以从中获得帮助。

笔记：

• 我正在使用 str 的硬编码值来检查结果。
• 我正在使用 displayResult 变量和 map 函数来渲染结果。如果最终数组有多个值，则 map 函数将迭代并将数组的每个值附加到 displayResult 变量中并呈现它。您可以避免这种情况，因为这只是为了显示结果而编写的。

您可以从下面的代码中清楚地看到我们如何将值传递给另一个组件（外部）。同样，如果要将值传递给另一个文件，则必须导入该文件并将值作为道具传递给该文件中定义的相应组件，

let displayResult = "";
function AnotherComponent(props) {
		props.finalArr.map((num, index) => {
    	displayResult = displayResult.concat(num)
		});
  	return (
  	<div>Value of final array is: {displayResult}</div>
    )
 
}


class Test extends React.Component {
  constructor(props) {
    super(props)
    this.state = {arr: []};
    this.handleConvertString = this.handleConvertString.bind(this);
  }
  
  handleConvertString(event) {
	  let str = "abb";
    let solutions = ['abb','klopp','lopp','hkhk','g','gh','a'] 
    if (solutions.includes(str)) {
    		let finalArr = this.state.arr;
        if (finalArr.includes(str)) {
            alert("Answer already found");
        }else{
        		finalArr.push(str)
            this.setState({arr: finalArr})
        }
    }
    
  }
  
  render() {
    return (
      <div>
        <button type="button" 
            onClick={this.handleConvertString}>
            Click Me
        </button>
        <AnotherComponent finalArr={this.state.arr}/>
      </div>
    )
  }
}

ReactDOM.render(<Test />, document.querySelector("#app"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="app"></div>