在 React 中将组件的状态添加到字符串

Question

我有一个具有以下状态的组件：

class Example extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      var1: "Dog",
      var2: "Cat",
      var3: [20, 40],
      currentFilter:"None"
    };
      this.updateFilter = this.updateFilter.bind(this);
  }

在更新过滤器函数中，我想合并所有的状态属性，但是下面的语法不起作用：

updateFilter(){
  var newSearch= "Searching" {this.state.var1} + {this.state.var2}
  this.setState({
    currentFilter: newSearch
  });
}

有没有办法将状态的属性合并到字符串变量中？

Answer 1

除非你正在编写 JSX，否则你不需要花括号。由于您的 updateFilter() 函数只是一个普通的 Javascript 函数，您可以将其写为：

updateFilter() {
  var newSearch = "Searching" + this.state.var1 + this.state.var2;
  this.setState({
    currentFilter: newSearch
  });
}

不过，仅供参考，您将获得的 newSearch 将是不连贯的 "SearchingDogCat"，因此您可能需要重新考虑您的串联。

Answer 2

您也可以这样做：

updateFilter() {
  var newSearch = `Searching ${this.state.var1} ${this.state.var2} `;
  this.setState({
    currentFilter: newSearch
  });
}

请注意，这些不是单引号。他们是`

在 React 中将组件的状态添加到字符串

Adding Component's State to a String in React

string

components

reactjs