Javascript 字符串操作jsx

我在React有一个项目叫“好机器人坏机器人”。 看起来是这样的：

(input box here)
    Hello! Wanna talk to some robots?
    I am good robot
    I hear you are saying, ______. is that correct?
    I am bad robot
    I hear you are saying, ______. is that correct?`

当我在输入框中键入时，___;将更改为用户输入。 无论用户键入什么，我都无法让坏机器人只重复“blabla”。我知道问题在我的职责范围内。。。我不太清楚怎么写。 下面是app.js和badrobot.js的代码：

import React, {Component} from 'react';
import Header from './Header'
import GreetingInput from './GreetingInput'
import GoodRobot from './GoodRobot'
import BadRobot from './BadRobot'
import './App.css';

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      greeting: '',
      name:'Stephen',
      robotgreeting: "______"
    }
  }

returnGreeting = (userSent) => {
  this.setState({greeting: userSent, robotgreeting: userSent})
}

render() {
  let {greeting, name, robotgreeting} = this.state
  return (
    <div className="App">
        <div>
          <Header greeting={name}/>
        </div>
        <div>
          <GreetingInput greeting={greeting} returnGreeting={this.returnGreeting}/>
        </div>
        <div>
          <GoodRobot greeting={robotgreeting}/>
        </div>
        <div>
          <BadRobot greeting ={robotgreeting} />
        </div>
    </div>
  );
  }
}

export default App;


 import React, {Component} from 'react';

    class BadRobot extends Component {

    wordManipulator = (word) => {
    let newStr = this.props.greeting.split('')
    let newStr2 = newStr.splice(null, word.length, 'b', 'l', 'a')
    return newStr2.join("")
    }
    // console.log(wordManipulator(this.props.greeting))

    render() {
      return (
        <div>
          <div>
            <h1>I am bad robot</h1>
            <h3>I hear you are saying, {this.props.greeting}. is that correct? </h3>
          </div>
        </div>
      );
     }
    }

    export default BadRobot;

您不应该直接在jsx上使用this.props.greetings。相反，请使用类似这样的单词manufactorhis.props.问候语：

---

您可以为此使用for循环：

wordManipulator==>{ 设blaArray=[b，l，a]； 设计数器=0； 让newStr=this.props.greeting.split 让newStr2=[]； forlet i=0；i.length计数器=0； newStr2.pushblaArray[计数器]； 计数器=计数器+1； } newStr2=newStr2.join； 返回新闻TR2

---

} 正如@Manuel所提到的，您可能希望将props.greeting变量发送到WordManufactor函数，以便呈现所需的输出

另外，在WordManipular函数中，无论props.greeting变量是什么，这行newStr.spitchenull、word.length、“b”、“l”、“a”都只返回bla。如果我理解正确，您希望在键入时重复bla

我相应地编辑了WordManipular函数，将props.greeting的每个字符映射到bla的可重复字符串对应索引

import React, {Component} from 'react';

const BLAH = "BLAH";

class BadRobot extends Component {

  wordManipulator = (word) => word.split("").map((c, i) => BLAH[(i % BLAH.length)]).join("")

  render() {
    return (
      <div>
        <div>
          <h1>I am bad robot</h1>
          <h3>I hear you are saying, {this.wordManipulator(this.props.greeting)}. is that correct? </h3>
        </div>
      </div>
    );
  }
}

export default BadRobot;

---

如果在BadRobot中记录this.props.greeting，您会看到什么？

import React, {Component} from 'react';

const BLAH = "BLAH";

class BadRobot extends Component {

  wordManipulator = (word) => word.split("").map((c, i) => BLAH[(i % BLAH.length)]).join("")

  render() {
    return (
      <div>
        <div>
          <h1>I am bad robot</h1>
          <h3>I hear you are saying, {this.wordManipulator(this.props.greeting)}. is that correct? </h3>
        </div>
      </div>
    );
  }
}

export default BadRobot;