Манипулирование строкой jsx

Question

У меня есть проект в React под названием Good Robot Bad robot. Это выглядит так:

(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?`

, когда я набираю в поле ввода, ___ меняется на ввод пользователя. У меня проблемы с тем, чтобы плохой робот повторял только «BLABLABLABLA» независимо от того, что пользователь печатает. Я знаю, что проблема заключается в моей функции ... я не совсем уверен, как это написать. Вот код для 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;

Answer 1

Как упомянул @Manuel, вы, возможно, захотите отправить переменную props.greeting в свой порядок функций wordManipulator, чтобы получить желаемый результат.

Кроме того, в вашей функции wordManipulator эта строка newStr.splice(null, word.length, 'b', 'l', 'a') вернет только bla независимо от переменной props.greeting. Если я правильно понимаю, вы хотите повторить bla при вводе.

Я соответственно отредактировал функцию wordManipulator, чтобы просто сопоставить каждый символ 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;

const greeting = "HELLO ROBOT!"

const BLAH = "BLAH";

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

console.log(wordManipulator(greeting))

Answer 2

Для этого вы можете использовать цикл for:

wordManipulator = () => {
    let blaArray = ["b","l","a"];
    let counter = 0;   
    let newStr = this.props.greeting.split('')    
    let newStr2 = [];
    for(let i = 0;i<newStr.length;i++){
      if(counter > blaArray.length) counter=0;
      newStr2.push(blaArray[counter]);
      counter = counter+1;
    }
    newStr2 = newStr2.join("");
    return newStr2
    }

Затем измените ваш обработанный код, как Мануэль предложил:

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

Answer 3

Не следует использовать this.props.greetings непосредственно на jsx. insted use wordManipulator(this.props.greetings) вот так:

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