javascript - 如何仅将 Prop 传递给 React 元素数组中的第一个元素？

Question

我如何才能将 Prop 仅传递给未知元素的 React 元素数组中的第一个元素？例如，在以下片段中，elements是最多 3 个自定义 Bar 的数组元素，我希望只有第一个被传递一个任意的 prop。

function Foo(props) {
  const myProp = 'test';
  const elements = [
    (isP && <Bar prop1={'p'} />),
    (isQ && <Bar prop1={'q'} />),
    (isR && <Bar prop1={'r'} />),
  ].filter(x => x);
  // Now do something like 'elements[0].props.myProp = myProp'
  return elements;
}

上下文是我想在边栏中显示三个面板。第一个应该显示它的标题和正文，其他的应该只显示它​​们的标题。

我考虑过但不喜欢的一些解决方案:

1) 使用 React 的 cloneElement克隆第一个元素并将其传递给 prop 的方法。 1但是克隆一个 React 元素只是为了设置一个 prop 似乎是一种糟糕的形式。

2) 预处理 bool 逻辑以确定哪个元素先出现，然后分配 prop。例如，类似于下面的代码，但逻辑更聪明:

function Foo(props) {
  const myProp = 'test';
  const elements = [
    (isP && <Bar myProp={isP && myProp}/>),
    (isQ && <Bar myProp={!isP && isQ && myProp} />),
    (isR && <Bar myProp={!isP && !isQ && isR && myProp} />),
  ].filter(x => x);
  return elements;
}

理想情况下，该解决方案将高效、简洁地实现目标。如果没有比 (1) 或 (2) 更好的解决方案，我也会接受它作为答案。

编辑:我忘记澄清的一些要点。

• 我正在使用 Redux，以防有帮助。
• <Bar /> 的实例实际上是多种类型(例如 Bar ， Bas ， Baz )以防对答案产生重大影响。 (我错误地过度简化了原来的问题。)

Answer 1

我想我会保持简单并使用 push:

function Foo(props) {
  const myProp = 'test';
  const elements = [];
  if (isP) {
      elements.push(<Bar myProp={myProp}/>);
  }
  if (isQ) {
      elements.push(elements.length ? <Bar/> : <Bar myProp={myProp}/>);
  }
  if (isR) {
      elements.push(elements.length ? <Bar/> : <Bar myProp={myProp}/>);
  }
  return elements;
}

如果 myProp 可以为假，那么最后两个会变得更简单:

  // ...
  if (isQ) {
      elements.push(<Bar myProp={elements.length || myProp}/>);
  }
  // ...

如果 falsy 不行但是 undefined 是:

  // ...
  if (isQ) {
      elements.push(<Bar myProp={elements.length ? undefined : myProp}/>);
  }
  // ...

虽然它不是特别漂亮。 :-) 或者一个循环:

function Foo(props) {
  const myProp = 'test';
  const elements = [];
  for (const flag of [isP, isQ, isR]) {
      if (flag) {
          elements.push(elements.length ? <Bar/> : <Bar myProp={myProp}/>);
      }
  }
  return elements;
}

(再次根据 myProp 的规则可能避免使用条件运算符。)

如果您需要带有 'p'、'q' 或 'r' 的 prop1在问题的第一个代码块中而不是第二个代码块中，通过对象数组的循环很容易完成:

function Foo(props) {
  const myProp = 'test';
  const elements = [];
  const specs = [
    [isP, 'p'],
    [isQ, 'q'],
    [isR, 'r']
  ];
  for (const [flag, prop1] of specs) {
      if (flag) {
          elements.push(elements.length ? <Bar prop1={prop1}/> : <Bar prop1={prop1} myProp={myProp}/>);
      }
  }
  return elements;
}

(再次根据 myProp 的规则可能避免使用条件运算符。)

等等