如何遍历数组并将值分配给另一个组件

Question

我正在处理以下组件

const propTypes = {
  items: PropTypes.arrayOf(PropTypes.shape({
    key: PropTypes.string.isRequired,
    url: PropTypes.string.isRequired,
  }).isRequired,
  ),
};

class Library extends React.Component {
  constructor(props) {
    super(props);
    this.state = { selected: ‘papers’ };
  }

  render() {
    return (
      <div>
        <form>
          <Dropdown
            options={[{ value: ‘test’, display: ’Test’ }]}
            name=“something”
            defaultValue=“test”
            required
          />
        </form>
        <br />
      </div>
    );
  }
}

Library.propTypes = propTypes;

render(Library, 'library')

下拉组件 returns 值的下拉列表。道具看起来像

Props
0 {..}
  key: google
  url: www.google.com
1 {..}
  key: apple
  url: www.apple.com

显示映射到键和值映射到 url 所以在下拉列表中我想显示道具中的键。当点击它时，下拉组件 returns url.

我如何遍历道具并将键分配给显示并将 url 分配给值？

Answer 1

如果我理解正确，你想将你的 items 对象从 prop 传递到 Dropdown 组件。

您可以使用 map 迭代您的 items 属性并生成包含您需要的字段的新数组。

const propTypes = {
  items: PropTypes.arrayOf(PropTypes.shape({
    key: PropTypes.string.isRequired,
    url: PropTypes.string.isRequired,
  }).isRequired,
  ),
};

class Library extends React.Component {
  constructor(props) {
    super(props);
    this.state = { selected: ‘papers’ };
  }

  render() {
    const newItems = this.props.items.map(item => {
        return {
            display: item.key,
            value: item.url,
        }
    })
    return (
      <div>
        <form>
          <Dropdown
            options={newItems}
            name=“something”
            defaultValue=“test”
            required
          />
        </form>
        <br />
      </div>
    );
  }
}

Library.propTypes = propTypes;

如果您不熟悉 map 函数，您可以阅读 here and watch here 了解它。

如何遍历数组并将值分配给另一个组件

how to loop over an array and assign values to another component

reactjs

react-props