render props模式

#积累/react

Render Props - React

基础用法

传入RenderAll的子组件是个函数；
该函数会在RenderAll组件中传入参数，并执行。

1
2
3
4
5
6
7
8
9
10
11
<RenderAll>
	{() => <h1>hello world</h1>}
</RenderAll>

const RenderAll = (props) => {
  return(
     <React.Fragment>
     	{props.children(props)}
     </React.Fragment>
  );
};

props.children不一定非得在render函数中执行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function Repeat(props) {
  let items = [];
  for (let i = 0; i < props.numTimes; i++) {
    items.push(props.children(i));
  }
  return <div>{items}</div>;
}
function ListOfTenThings() {
  return (
    <Repeat numTimes={10}>
      {(index) => <div key={index}>This is item {index} in the list</div>}
    </Repeat>
  );
}

控制props

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const Login = (props) => {
  const userName = getUserName();

  if (userName) {
    const allProps = {userName, ...props};
    return (
      <React.Fragment>
        {props.children(allProps)}
      </React.Fragment>
    );
  } else {
    return null;
  }
};
<Login>
	{({userName}) => <h1>Hello {userName}</h1>}
</Login>

不局限于children

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const Auth= (props) => {
  const userName = getUserName();

  if (userName) {
    const allProps = {userName, ...props};
    return (
      <React.Fragment>
        {props.login(allProps)}
      </React.Fragment>
    );
  } else {
    <React.Fragment>
      {props.nologin(props)}
    </React.Fragment>
  }
};

  <Auth
    login={({userName}) => <h1>Hello {userName}</h1>}
    nologin={() => <h1>Please login</h1>}
  />