Question

我正在尝试重构其他人编写的某些代码，并且想知道是否可能进行以下操作。如何创建一个返回非html或jsx的react组件？并返回一个函数之类的东西？

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

我想将这些功能中的2个提取到它们自己的组件中，因为它们相似并且可以重复使用

但是，这些函数只是进行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存储并以这种方式使用道具。这可能吗？

Answer 1

HOC呢？您可以使用func1()方法创建一个组件，并且该组件的render函数将仅返回{this.props.children}。

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

Answer 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"/>

React组件返回jsx以外的东西

2 个答案: