javascript - react JSX : Access props keys dynamically

Question

假设我有一个字段列表，我想在要传递给该组件的 Prop 上访问这些字段。

下面的代码不起作用，但是否可以访问某些 Prop 值:{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'/>

但我认为不需要在单独的数组中定义键，如果您想迭代props数据(从父级传递)，那么您可以像这样使用它这也是:

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