reactjs - 如何循环数组并将值分配给另一个组件

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

Dropdown 组件返回值的下拉列表。道具看起来像

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

显示映射到键和值映射到 url，所以在下拉列表中我想显示道具中的键。单击它时，Dropdown 组件会返回 url。

我怎样才能遍历道具并将键分配给显示和将url分配给值？

Answer 1

如果我理解正确，您希望将items对象从道具传递到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，可以在这里阅读并在此处观看。