Question

我的表单有此伪代码。我只想显示canAccess = true的字段。

const initialValues = {
  firstName: { canAccess: true, value: 'Mary' },
  surName: { canAccess: false, value: 'Casablanca' }  
}

<Form initialValues={initialValues}>
{props => 
  <>
    <div className="nestedItem">
      <Field name="firstName" />
    </div>
    <Field name="surName" />
  </>
}
</Form>

使用此代码，我希望看到具有firstName的呈现字段。

我知道我可以通过React.Children.map（）进行迭代，但是我不知道在使用渲染道具时如何迭代子级。也可以有嵌套的元素，所以我想按名称查找特定类型的组件。

感谢帮助。

Answer 1

const initialValues = {
  firstName: { canAccess: true, value: 'Mary' },
  surName: { canAccess: false, value: 'Casablanca' }  
}

<Form initialValues={initialValues}>
{props => 
  <>
    {
      Object.keys(props.initialValues).map(k => (
        k.canAccess && <Field name={k} />
      ));
    }
  </>
}
</Form>

编辑：您的表单可以执行一些逻辑，并将经过过滤的项目传递回您的组件。

getFilteredItems = items => Object.keys(items).reduce((acc, key) => {
  const item = items[key];
  const { canAccess } = item;
  if(!canAccess) return acc;
  return {
    ...acc,
    [key]: item
  }
}, {}));

render() {
  const { initialValues, children } = this.props;
  const filteredItems = this.getFilteredItems(initialValues);
  return children(filteredItems);
}

<Form initialValues={initialValues}>
  { props => 
    <>
      { 
        Object.keys(props).map(k => <Field name={k} />) 
      }
    </>
</Form>

Answer 2

这就是我想要的。

const Form = ({initialValues, children}) =>
  props => 
    <Authorized initialValues={initialValues}>
      {typeof children === 'function' ? children(props) : children}
    </Authorized>

const Authorized = ({initialValues, children}) => {
  // Do check 
  React.Children.map(chidlren, x => { 
  if(x.type === Field ) // && initialValues contains x.props.name
    return x

  return null
  ... })
}

如何使用渲染道具在React中迭代孩子

2 个答案: