React JSX:动态访问道具键

Question

假设我有一个我想在道具上访问的字段列表，我将传递给该组件。

下面的代码不起作用，但是可以访问某些道具值，例如： {session['myCustomKey']}？

class MyComponent extends React.Component {
  render() {
    const { myObj } = this.props;
    const fields = ['field_1', 'field_2', 'field_3'];
    return (
      <div className={'row'}>
        {fields.map((field) =>
          <div className={'col-sm-4'}>
            <div className={'row'}>
              <InputText
                id={`{${myObj} + ${field}`}
                value={`${myObj} + "." + ${field}`}
                isDisabled
              />
            </div>
          </div>
      )}
      </div>
    );
  }
}

Answer 1

props是一个对象，我们可以通过 props.data['key']。

访问值。

检查此示例：

var App = ({data}) => {
   let fields = ['a', 'b', 'c'];
   return(
     <div>
        {
           fields.map(el=> <p> {data[el]} </p>)
        }
     </div>
   )
}
let data = {'a': 1, 'b': 2, 'c': 3};
ReactDOM.render(<App data={data}/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='app'/>

，但我认为不需要在单独的array中定义键，如果您要迭代props数据(从父母传递(，则可以这样使用：

Object.keys(this.props.myObj).map(el => {
    return <p key={el} > {el}: {this.props.myObj[el]} </p>
})