//公有的函数部分
const someMixins={
 printColor(){
 console.log(this.state.color);
 }
 printWeight(){
 console.log(this.state.weight);
 }
}
class Apple extends React.Component{
 //仅仅作为演示，mixins一般是通过React.createClass创建，并且ES6也没有key:value这种写法
 mixins:[someMixins]
 constructor(props){
 super(props);
 this.state={
  color:'red',
  weight:'100g'
 }
 this.printColor=this.printColor.bind(this);
 }
 render(){
 return <div className="m-box" onClick={this.printColor}>
    这是一个苹果
   </div>
 }
}
class Banana extends React.Component{
 mixins:[someMixins]
 constructor(props){
 super(props);
 this.state={
  color:'yellow',
  weight:'200g'
 }
 this.printColor=this.printColor.bind(this);
 }
 render(){
 return <div className="m-box" onClick={this.printColor}>
    这是一个香蕉
   </div>
 }
}

const redApple = withFruit(Apple);

const redApple = withFruit(Apple，{color:'red',weight:'200g'});

const redApp=withFruit(App,()=>{console.log('I am a fruit')})

class Admin extends React.Component{

}
const mapStateToProps=(state)=>{
 return {
 };
}
const mapDispatchToProps=(dispatch)=>{
 return {

 }
}

const connect(mapStateToProps,mapDispatchToProps)(Admin)

class Cat extends React.Component {
 render() {
 const mouse = this.props.mouse;
 return (
  <img src="/UploadFiles/2021-04-02/cat.jpg">

上述是官网给出的例子，我们来看主要是部分是下面这两句：


Class Mouse extends React.component{
 ...
 {this.props.render(this.state)}
 ...
}


......
<Mouse render={mouse => (
   <Cat mouse={mouse} />
  )}/>


在使用Mouse组件的时候，通过一个render属性，传递一个可用组件Cat给父组件Mouse，而在Mouse组件中，可以将本身的state对象传递给Cat组件，Cat组件中的mouse属性的值与Mouse父组件中的state相同。
精简来说: 就是父组件可以将自己的state传递给子组件，而子组件可以根据父组件的state对象，来进行render。
这样做的好处是：
（1）不用担心props的命名问题
（2）可以溯源，子组件的props一定是来自于直接父组件
（3）是动态构建的。


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。