React 组件返回 jsx 以外的内容答案

【问题标题】：React component to return something other than jsxReact 组件返回 jsx 以外的内容
【发布时间】：2019-03-01 13:04:01
【问题描述】：

我正在尝试重构其他人编写的一些代码，并且想知道以下是否可行。我可以创建一个返回非 html 或 jsx 的反应组件吗？并返回一个函数什么的？

到目前为止，该组件基本上包含 4 个函数，然后是一个返回块，该块返回一些被渲染的 jsx

我想将其中两个函数提取到它们自己的组件中，因为它们相似并且可以重复使用

然而，这些函数只是进行 ajax 调用并调用其他函数，而不是返回任何 jsx。他们还需要里面的道具，并且需要传入或连接到redux商店的道具它调用的一些函数是调度函数，因此必须连接到 redux 存储。所以我不能建立一个独立的功能

这有意义还是我错过了什么。下面的伪代码来演示：

const component = ({...props}) => {
   const func1(){
     prop1()
     try{

     } catch(){
      callingAnotherProp()
     }
   }

   const func2(){

   }

   const func3(){

   }

   const func4(){

   }
}

想象func1 和func2 是相同的。正如你所看到的，他们不返回任何 jsx 只是进行进一步的调用。我不认为我可以隔离成一个 sep 函数。我宁愿不将道具作为 args 传递，而只是将函数连接到 redux 存储并以这种方式使用道具。这可能吗？

【问题讨论】：

到目前为止，我了解您需要 HOC 吗？
不太清楚您要做什么，但您可以制作一个调用函数并仅返回 null 的组件？

标签： javascript reactjs redux

【解决方案1】：

HOC 呢？你可以使用func1()方法创建一个组件，这个组件的render函数只会返回{this.props.children}。

另外两个选项是独立函数（你不喜欢它）和继承（我不喜欢它）。

【讨论】：

【解决方案2】：

不确定我是否完全理解您的目标，但据我了解，您需要一个能够获取数据并将其公开给其他组件（或子组件？）的组件。
有一个很好的模式叫做children as a function (or render props)。

基本上，您将传递给组件的子项视为一个函数，并且您可以向该函数传递任何内容（在您的情况下是获取的数据）。

return this.children(this.state.data)

这是一个运行中的小例子：

class Fetcher extends React.Component {
  state = { result: { data: [] } };

  componentDidMount() {
    const { url } = this.props;
    fetch(url)
      .then(response => response.json())
      .then(data => this.setState({ result: { data } }))
      .catch(err => this.setState({ result: { error: true, message: err } }));
  }

  render() {
    const { children } = this.props;
    return children(this.state.result);
  }
}

class App extends React.Component {
  renderUsers = users => users.map(user => <div>{user.name}</div>);

  render() {
    return (
      <div>
        <Fetcher url={"https://jsonplaceholder.typicode.com/users"}>
          {response => (
            <div>
              {response.data.length
                ? this.renderUsers(response.data)
                : "Loading..."}
            </div>
          )}
        </Fetcher>
      </div>
    );
  }
}

const root = document.getElementById("root");
ReactDOM.render(<App />, root);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"/>

【讨论】：