标签: react-fragment

假设我有一个简单的组件，它可能会或可能不会呈现计数器。

React 中表达阻塞代码路径的最佳实践是什么？如果它返回null，[]或Fragment？

class App extends Component {
  renderCounter() {
    if (!this.props.shouldRenderCounter) {
      // // which should I return?
      // return; 
      // return null; 
      // return []; 
      // return <React.Fragment />; 
    }
    return <Counter />;
  }

  render() {
    return (
      <div>
        {this.renderCounter()}
      </div>
    );
  }
}

我认为null是最清楚的，但我可以想象如果返回函数周围的上下文需要一个组件，它会导致问题。[]而Fragment这两个看似细微的选项对我来说，除了片段是更容易一些阅读。有什么不同？

我认为React.isFragment目前仅是一个建议：https : //github.com/facebook/react/issues/12038

是否有解决方法来做类似的事情

if (child instanceof React.Fragment) {
  ...
}

直到该API可用。

适用于我的临时解决方案：

const isReactFragment = child => {
  try {
    return child.type.toString() === React.Fragment.toString();
  } catch (e) {
    return false;
  }
};

我刚刚了解了React Fragments。

我了解到，通过创建更少的树节点，片段可以稍微提高效率，并且在查看检查器时可使片段更整洁，但是那为什么我们还要在React组件中用作容器？我们应该始终在组件中使用React.Fragments吗？

使用片段会增加样式难度吗？（我不确定，因为我还没有尝试过）。

假设我正在制作一个包装器组件，它只在传入一些子节点时才呈现自身：

const Wrapper = ({children}) => {
  if (!children) return null
  return <div>{children}</div>
}

问题是它children可能是Fragment包含空值或空值数组。或包含片段的片段包含...

<Wrapper>hey</Wrapper> // renders <div>hey</div> 
<Wrapper>{null}</Wrapper> // renders nothing 
<Wrapper>{[null]}</Wrapper> // renders <div/> 
<Wrapper><React.Fragment>{null}</React.Fragment></Wrapper> // renders <div/> 

有没有一种规范的方法来检查所有这些条件？

在这里，我返回当前的 react dom 内容：

  return (
    <React.Fragment>
      {inProduction ? null : <CP.Dev/>}
      <CP.Snackbar
        {...p as any}
      />
      <Router history={browserHistory}>
        <Switch>
          <Route path="/login" component={Login} />
          <Route path="/signup" component={Signup} />
           {authRoutes}
        </Switch>
      </Router>
    </React.Fragment>
  );

所以..Snackbar 组件为每条路线呈现 - 目标：我想要做的是根据网址呈现不同的欢迎消息 - 最好的方法是什么？如何侦听 url 更改，然后根据 url 呈现不同的消息？

或者，我可以用 Snackbar 包装每个组件，然后将一个键硬编码到不同的消息，但这似乎没有必要。

我使用的是react v16.3.0和flow-bin v0.69.0

使用反应片段<React.Fragment>或其中的任何一种或<></>类似的速记语法

import React from 'react'

const ComponentA = () => (
  <React.Fragment>
    <div>Component</div>
    <div>A</div>
  </React.Fragment>
)

const ComponentB = () => (
  <>
    <div>Component</div>
    <div>B</div>
  </>
)

流程抱怨以下错误(两者都是一个混淆错误,只是在ComponentA这里显示输出)

Cannot get React.Fragment because property Fragment is missing in object type [1].

  24? const ComponentA = () => (
  25?   <React.Fragment>
  26?     <div>Component</div>
  27?     <div>A</div>
  28?   </React.Fragment>

 /private/tmp/flow/flowlib_2349df3a/react.js
 251?   declare export default {|
 252?     +DOM: typeof DOM,
 253?     +PropTypes: …

我知道 React Fragment 可用于对子组件进行分组，如下所示：

render() {
  return (
    <React.Fragment>
      <Foo />
      <Bar />
      <Baz />
    </React.Fragment>
  );
}

但是你可以给它添加道具吗？假设您要使用扩展运算符：

<React.Fragment {...otherProps}>
  ...
</React.Fragment>