react props.children 探索
总结
props.children的数据类型包括:
- undefined
- string
- object (ReactElement)
- function
- array: (string|ReactElement|function)[]
undefind
import React from "react";
class Child extends React.Component {
render() {
const { children } = this.props;
console.log("children: ", typeof children, children); // children: 'undefined' undefined
return <div className="child">{children}</div>;
}
}
export default function App() {
return (
<div>
<Child></Child>
</div>
);
}
string
import React from "react";
class Child extends React.Component {
render() {
const { children } = this.props;
console.log("children: ", typeof children, children); // children: 'string' 131231
return <div className="child">{children}</div>;
}
}
export default function App() {
return (
<div>
<Child>131231</Child>
</div>
);
}
object
import React from "react";
class Child extends React.Component {
render() {
const { children } = this.props;
console.log("children: ", typeof children, children); // children: 'object' {$$typeof: Symbol(react.element), key: null, ref: null, props: {…}, type: ƒ, …}
return <div className="child">{children}</div>;
}
}
function Doll() {
return <div>This is a doll;</div>;
}
export default function App() {
return (
<div>
<Child>
<Doll/>
</Child>
</div>
);
}
function
import React from "react";
class Child extends React.Component {
render() {
const { children, name } = this.props;
console.log("children: ", typeof children, children); // children: 'function' arg1 => { return "hello " + arg1; }
return <div className="child">{children(name)}</div>;
}
}
export default function App() {
return (
<div>
<Child name="Tom">
{(arg1) => {
return "hello " + arg1;
}}
</Child>
</div>
);
}
array
import React from "react";
console.log(React);
class Child extends React.Component {
render() {
const { children, name } = this.props;
console.log(
"children: ",
typeof children, // 'object'
children instanceof Array, // true
children // [ƒ, "This is a Text;", {…}]
);
return (
<div className="child">
{children[0](name)}
<br/>
{React.Children.map(children, (v, i) => {
console.log('--->', typeof v, v, i); // 这里需要注意,React.Children.map函数会先过滤掉数组中的function类型数据
if (typeof v === "function") {
return v(name);
} else {
return v;
}
})}
</div>
);
}
}
function Doll() {
return <div>This is a doll;</div>;
}
export default function App() {
return (
<div>
<Child name="Tom">
{(arg1) => {
return "hello " + arg1;
}}
This is a Text;
<Doll />
</Child>
</div>
);
}