在React JSX中迭代

Question

我在React jsx中迭代出現問題。

我想使代碼去

value={('this.props.message.text1)} 
    value={('this.props.message.text2)} 

但我有與「價值= {（'this.props.message.text1）}」部分編碼的麻煩。

我要像做

value={('this.props.message.' + key)} 

下面是我的代碼;

constructor(){ 
    super(); 
    this.state = { 
    message: { 
     text1: "hello1", 
     text2: "hello2" 
    } 
    } 
} 

renderMessage(key){ 
    return (
     <div className="fish-edit" key={key}> 
     <input 
     type="text" 
     value={('this.props.message.' + key)} 
     onChange={this.props.handleChange} 
     /> 
     </div> 
    ) 
    } 

render() { 
    return (
    <div> 
     {Object.keys(this.props.message).map(this.renderMessage)} 
    </div> 
    ) 
} 
}; 

Answer 1

使用squarebracket訪問符號，value={this.props.message[key]}