將 React 組件注入另一個 React 組件的最佳方法是什么？ 還是我應該打擾？

Question

在開發我的第一個大型 React 應用程序時，我開始對嵌套組件的緊密耦合感到不安，尤其是在編寫單元測試時。

如果是高級組件，並且其渲染函數返回<div><Bar><Baz /></Bar></div> ，我希望能夠單獨測試 Foo、Bar 和 Baz。

我尋求建議，但沒有找到任何建議。 所以，我自己想出了兩種注入方法：工廠函數和通過外部組件的屬性。 （我不是在談論兒童。我在談論“烘焙”依賴項——人們通常通過 require 或 import 語句導入的那種。

特性

const Baz = React.createClass({
  render() {
    return <p>Inner</p>;
  }
});

const Foo = React.createClass({
  render() {
    const Bar = this.props.innerComponent;
    return <Bar />;
  }
});

ReactDOM.render(
  <Foo innerComponent={Baz} />,
  document.getElementById('container')
);

工廠

const Baz = React.createClass({
 render() {
   return <p>Inner</p>;
 }
});

const fooFactory = innerComponent => {
  return  React.createClass({
    render() {
      const Bar = innerComponent;
      return <Bar />;
   }
 });
};

const Foo = fooFactory(Baz);

ReactDOM.render(
  <Foo innerComponent={Baz} />,
  document.getElementById('container')
);

還是我只是把解耦走得太遠了？ 我在任何教程或示例中幾乎沒有看到其他人這樣做。

你會傾向於有時注入組件而不是其他時間嗎？ 在什么情況下？ 而且，如果你這樣做了，你會使用上述技術之一還是其​​他方式？

Answer 1

當運行時需要指定一個組件類型時，您會不時看到這種模式，它傳遞給的組件將實例化它自己； 例如， React TransitionGroup組件采用這樣一個名為component 的屬性：

默認情況下ReactTransitionGroup呈現為span 。 您可以通過提供component道具來更改此行為。 例如，以下是渲染<ul> ：

 <ReactTransitionGroup component="ul"> ... </ReactTransitionGroup>

React 可以渲染的每個 DOM 組件都可以使用。 但是， component不需要是 DOM 組件。 它可以是你想要的任何 React 組件； 甚至是你自己寫的！ 只需編寫component={List} ，您的組件就會收到this.props.children 。

將此模式用於組件的用戶指定內容不太常見，因為this.props.children更優雅地解決了這個問題。

但是，就測試而言，常見的解決方案是將每個組件單獨導出並單獨測試。 如果高級組件以某種方式組合它們，那么您真正需要測試的只是它們是否正確組合，因為這些組件也是單獨測試的。

分離“智能”和“啞”組件有一個共同的模式； 愚蠢的組件只是渲染它們所給定的內容，並且非常容易進行單元測試。 智能組件可能會獲取數據（例如通過 Ajax 或從通量存儲）、組合特定的啞組件或做出其他“決定”，並且可能更難以測試——但同樣，由於啞組件已經過測試，理想情況下您可以只需檢查智能組件的行為是否正確並呈現正確的內容。

使用您的示例，渲染<div><Bar><Baz /></Bar></div>是Foo的工作； 它是一個智能組件，測試應該確保它完全呈現。 然而， Bar的工作是渲染它的孩子，並且更容易測試。

您還可以使用TestUtils.mockComponent模擬組件。

Answer 2

查看mochajs 。 這個測試框架覆蓋了import / require ，它解決了你的問題。

不過，這確實意味着您的子組件需要編寫為 ECMA 6 或 NodeJS 模塊 - 但這實際上只是意味着它們需要位於單獨的源文件中。