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']访问这些值。

检查此示例：

＆＃13;

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'))

＆＃13;

<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'/>

＆＃13;

但我认为不需要在单独的array中定义键，如果你想迭代props数据（从父传递），那么你也可以像这样使用它：

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

React JSX：动态访问道具键

1 个答案: