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

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

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

将键映射到值和值映射到url所以在下拉列表中我想显示来自props的键。单击它时，Dropdown组件将返回URL。

我怎样才能循环道具并将键分配给显示和url来估价？

Answer 1

如果我理解正确，您希望将:setlocal buftype=nowrite对象从道具传递到items组件。

您可以使用map迭代Dropdown道具并生成包含所需字段的新数组。

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;功能，可以阅读here并观看here。

如何循环数组并将值赋给另一个组件

1 个答案: