මුක්කු {this.props.children to වෙත යොමු කරන්නේ කෙසේද

සාමාන්‍ය ආකාරයකින් භාවිතා කළ හැකි සමහර සංරචක අර්ථ දැක්වීමට නිසි ක්‍රමයක් සොයා ගැනීමට මම උත්සාහ කරමි:

<Parent>
  <Child value="1">
  <Child value="2">
</Parent>

ඇත්තෙන්ම දෙමාපියන් සහ දරුවන් සංරචක අතර ඉටු කිරීම සඳහා යන්නේ, ඔයාට හිතාගන්න පුළුවන් තර්ක ඇත <select>හා <option>මෙම තර්කනය උදාහරණයක් ලෙස.

ප්‍රශ්නයේ අරමුණ සඳහා මෙය ව්‍යාජ ක්‍රියාත්මක කිරීමකි:

var Parent = React.createClass({
  doSomething: function(value) {
  },
  render: function() {
    return (<div>{this.props.children}</div>);
  }
});

var Child = React.createClass({
  onClick: function() {
    this.props.doSomething(this.props.value); // doSomething is undefined
  },
  render: function() {
    return (<div onClick={this.onClick}></div>);
  }
});

ප්‍රශ්නය වන්නේ ඔබ {this.props.children}එතීමේ අංගයක් නිර්වචනය කිරීමට භාවිතා කරන සෑම අවස්ථාවකම, ඔබ යම් දේපලක් එහි සියලුම දරුවන්ට ලබා දෙන්නේ කෙසේද?

නව මුක්කු සහිත දරුවන් ක්ලෝන කිරීම

ළමයින්ට ප්‍රතික්‍රියා කිරීමට ඔබට React.Children භාවිතා කළ හැකිය, ඉන්පසු React.cloneElement භාවිතා කර සෑම මූලද්‍රව්‍යයක්ම නව මුක්කු (නොගැඹුරු ඒකාබද්ධ) සමඟ ක්ලෝන කරන්න . උදාහරණයක් වශයෙන්:

const Child = ({ doSomething, value }) => (
    <button onClick={() => doSomething(value)}>Click Me</button>
);

class Parent extends React.Component{
    doSomething = value => {
        console.log("doSomething called by child with value:", value);
    }

    render() {
        const childrenWithProps = React.Children.map(this.props.children, child => {
            // checking isValidElement is the safe way and avoids a typescript error too
            const props = { doSomething };
            if (React.isValidElement(child)) {
                return React.cloneElement(child, props);
            }
            return child;
        });

        return <div>{childrenWithProps}</div>;
    }
}

function App() {
    return (
        <Parent>
            <Child value={1} />
            <Child value={2} />
        </Parent>
    );
}

ReactDOM.render(<App />, document.getElementById("container"));

ෆෙඩල්: https://jsfiddle.net/2q294y43/2/

කාර්යයක් ලෙස ළමයින් කැඳවීම

විකල්පයක් ලෙස, ඔබට රෙන්ඩර් මුක්කු සහිත දරුවන්ට මුක්කු යැවිය හැකිය . මෙම ප්‍රවේශයේදී, ළමයින් (එය childrenවෙනත් හෝ වෙනත් මුක්කු නාමයක් විය හැකිය) යනු ඔබට සම්මත කිරීමට අවශ්‍ය ඕනෑම තර්ක පිළිගෙන ළමයින් ආපසු ලබා දිය හැකි ශ්‍රිතයකි:

const Child = ({ doSomething, value }) => (
    <button onClick={() => doSomething(value)}>Click Me</button>
);

class Parent extends React.Component{
    doSomething = value => {
        console.log("doSomething called by child with value:", value);
    }

    render(){
        // note that children is called as a function and we can pass args to it
        return <div>{this.props.children(doSomething)}</div>
    }
};

function App(){
    return (
        <Parent>
            {doSomething => (
                <React.Fragment>
                    <Child doSomething={doSomething} value={1} />
                    <Child doSomething={doSomething} value={2} />
                </React.Fragment>
            )}
        </Parent>
    );
}
 
ReactDOM.render(<App />, document.getElementById("container"));

ඒ වෙනුවට <React.Fragment>හෝ සරලව <>ඔබ කැමති නම් අරාවක් ආපසු ලබා දිය හැකිය.

ෆෙඩල්: https://jsfiddle.net/ferahl/y5pcua68/7/

එය කිරීමට තරමක් පිරිසිදු ක්‍රමයක් සඳහා, උත්සාහ කරන්න:

<div>
    {React.cloneElement(this.props.children, { loggedIn: this.state.loggedIn })}
</div>

සංස්කරණය කරන්න: ඔබට තනි තනි දරුවන් කිහිප දෙනෙකු සමඟ භාවිතා කිරීමට (දරුවාම අංගයක් විය යුතුය) ඔබට කළ හැකිය. 16.8.6 දී පරීක්ෂා කර ඇත

<div>
    {React.cloneElement(props.children[0], { loggedIn: true, testingTwo: true })}
    {React.cloneElement(props.children[1], { loggedIn: true, testProp: false })}
</div>

මේක උත්සාහ කරන්න

<div>{React.cloneElement(this.props.children, {...this.props})}</div>

එය ප්‍රතික්‍රියා -15 භාවිතා කරමින් මට වැඩ කළේය.

ළමයින් යොමු කිරීම සඳහා මුක්කු මුර කරන්න.

අනෙක් සියලුම පිළිතුරු බලන්න

සන්දර්භය හරහා සංරචක ගස හරහා බෙදාගත්, ගෝලීය දත්ත සමත් කරන්න

සන්දර්භය සැලසුම් කර ඇත්තේ වර්තමාන සත්‍යාපනය කළ පරිශීලකයා, තේමාව හෝ කැමති භාෂාව වැනි ප්‍රතික්‍රියා සංරචක ගසක් සඳහා “ගෝලීය” ලෙස සැලකිය හැකි දත්ත බෙදා ගැනීමට ය. ¹

වියාචනය: මෙය යාවත්කාලීන කළ පිළිතුරකි, පෙර පිළිතුර පැරණි සන්දර්භය API භාවිතා කළේය

එය පාරිභෝගික / සැපයුම් මූලධර්මය මත පදනම් වේ. පළමුව, ඔබේ සන්දර්භය සාදන්න

const { Provider, Consumer } = React.createContext(defaultValue);

ඉන්පසු භාවිතා කරන්න

<Provider value={/* some value */}>
  {children} /* potential consumers */
<Provider />

සහ

<Consumer>
  {value => /* render something based on the context value */}
</Consumer>

සැපයුම්කරුවෙකුගෙන් පැවත එන සියලුම පාරිභෝගිකයින් සැපයුම්කරුගේ අගය මුක්කු වෙනස් වන සෑම විටම නැවත ඉදිරිපත් කරනු ඇත. සැපයුම්කරුගේ සිට එහි පැවත එන පාරිභෝගිකයින් වෙත ප්‍රචාරණය කිරීම අනිවාර්යයෙන්ම යාවත්කාලීන කිරීමේ ක්‍රමයට යටත් නොවේ, එබැවින් මුතුන් මිත්තන්ගේ අංගයක් යාවත්කාලීනයන්ගෙන් ඇප ලබා ගත් විට පවා පාරිභෝගිකයා යාවත්කාලීන වේ. ¹

සම්පූර්ණ උදාහරණය, ​​අර්ධ ව්‍යාජ කේතය.

import React from 'react';

const { Provider, Consumer } = React.createContext({ color: 'white' });

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: { color: 'black' },
    };
  }

  render() {
    return (
      <Provider value={this.state.value}>
        <Toolbar />
      </Provider>
    );
  }
}

class Toolbar extends React.Component {
  render() {
    return ( 
      <div>
        <p> Consumer can be arbitrary levels deep </p>
        <Consumer> 
          {value => <p> The toolbar will be in color {value.color} </p>}
        </Consumer>
      </div>
    );
  }
}

¹ https://facebook.github.io/react/docs/context.html

කැදැලි දරුවන්ට මුක්කු යැවීම

කිරීමට යාවත් කාලීන 16.6 ක්රියාත්මක වෙන්න ඔබ දැන් භාවිතා කළ හැකිය React.createContext හා contextType .

import * as React from 'react';

// React.createContext accepts a defaultValue as the first param
const MyContext = React.createContext(); 

class Parent extends React.Component {
  doSomething = (value) => {
    // Do something here with value
  };

  render() {
    return (
       <MyContext.Provider value={{ doSomething: this.doSomething }}>
         {this.props.children}
       </MyContext.Provider>
    );
  }
}

class Child extends React.Component {
  static contextType = MyContext;

  onClick = () => {
    this.context.doSomething(this.props.value);
  };      

  render() {
    return (
      <div onClick={this.onClick}>{this.props.value}</div>
    );
  }
}


// Example of using Parent and Child

import * as React from 'react';

class SomeComponent extends React.Component {

  render() {
    return (
      <Parent>
        <Child value={1} />
        <Child value={2} />
      </Parent>
    );
  }
}

React.createContext බැබළෙන්නේ React.cloneElement නඩුවට කැදැලි සංරචක හැසිරවිය නොහැකි තැනයි

class SomeComponent extends React.Component {

  render() {
    return (
      <Parent>
        <Child value={1} />
        <SomeOtherComp><Child value={2} /></SomeOtherComp>
      </Parent>
    );
  }
}

ඔබට භාවිතා කළ හැකිය React.cloneElement, ඔබේ යෙදුම තුළ එය භාවිතා කිරීමට පෙර එය ක්‍රියාත්මක වන්නේ කෙසේදැයි දැන ගැනීම වඩා හොඳය. එය හඳුන්වා දී ඇත React v0.13, වැඩි විස්තර සඳහා කියවන්න, එබැවින් මෙම කාර්යය සමඟ ඔබ වෙනුවෙන් යමක්:

<div>{React.cloneElement(this.props.children, {...this.props})}</div>

එබැවින් එය සියල්ල ක්‍රියාත්මක වන්නේ කෙසේද සහ ඔබට ඒවා භාවිතා කළ හැක්කේ කෙසේද යන්න තේරුම් ගැනීමට ප්‍රතික්‍රියා ලේඛනයේ රේඛා ගෙන එන්න:

ප්‍රතික්‍රියා v0.13 RC2 හි දී අපි මෙම අත්සන සමඟ React.addons.cloneWithProps හා සමාන නව API එකක් හඳුන්වා දෙන්නෙමු:

React.cloneElement(element, props, ...children);

ක්ලෝන විත්ප්‍රොප්ස් මෙන් නොව, මෙම නව ශ්‍රිතයට ශෛලිය හා පංතියේ නම ඒකාබද්ධ කිරීම සඳහා කිසිදු ඉන්ද්‍රජාලික හැසිරීමක් නොමැත. එම හේතුව නිසා අපට ට්‍රාන්ස්ෆර්ප්‍රොප්ටෝ වෙතින් එම අංගය නොමැත. මැජික් දේවල් පිළිබඳ සම්පූර්ණ ලැයිස්තුව හරියටම කුමක්දැයි කිසිවෙකුට විශ්වාස නැත, එමඟින් කේතය ගැන තර්ක කිරීම දුෂ්කර වන අතර ශෛලියට වෙනස් අත්සනක් ඇති විට නැවත භාවිතා කිරීමට අපහසු වේ (උදා: එළඹෙන ප්‍රතික්‍රියා ස්වදේශික).

React.cloneElement බොහෝ දුරට සමාන වේ:

<element.type {...element.props} {...props}>{children}</element.type>

කෙසේ වෙතත්, JSX සහ cloneWithProps මෙන් නොව, එය refs ද ආරක්ෂා කරයි. මෙයින් අදහස් කරන්නේ ඔබ එය මත යොමු වූ දරුවෙකු ලබා ගන්නේ නම්, ඔබ එය ඔබේ මුතුන්මිත්තන්ගෙන් අහම්බෙන් සොරකම් නොකරන බවයි. ඔබගේ නව අංගයට අමුණා ඇති එකම ref එක ඔබට ලැබෙනු ඇත.

එක් පොදු රටාවක් නම් ඔබේ දරුවන් සිතියම් ගත කර නව මුක්කු එකතු කිරීමයි. ක්ලෝන විත්ප්‍රොප්ස් වෙත යොමු වීම නැතිවීම පිළිබඳව බොහෝ ගැටලු වාර්තා වූ අතර, ඔබේ කේතය ගැන තර්ක කිරීම දුෂ්කර විය. දැන් ක්ලෝනඑලෙමන්ට් සමඟ එකම රටාව අනුගමනය කිරීම අපේක්ෂිත පරිදි ක්‍රියාත්මක වේ. උදාහරණයක් වශයෙන්:

var newChildren = React.Children.map(this.props.children, function(child) {
  return React.cloneElement(child, { foo: true })
});

සටහන: React.cloneElement (ළමයා, {ref: 'newRef'}) ref එක ඉක්මවා යයි, එබැවින් ඔබ ඇමතුම්-යොමු කිරීම් භාවිතා නොකරන්නේ නම්, දෙමව්පියන් දෙදෙනෙකුට එකම දරුවාට යොමු වීමක් තවමත් කළ නොහැක.

මුක්කු දැන් වෙනස් නොවන බැවින් ප්‍රතික්‍රියා 0.13 වෙත පිවිසීමට මෙය තීරණාත්මක ලක්ෂණයකි. උත්ශ්‍රේණි කිරීමේ මාර්ගය බොහෝ විට මූලද්‍රව්‍යය ක්ලෝන කිරීම වේ, නමුත් එසේ කිරීමෙන් ඔබට ref අහිමි විය හැකිය. එමනිසා, අපට මෙහි වඩා හොඳ වැඩිදියුණු කිරීමේ මාර්ගයක් අවශ්‍ය විය. අපි ෆේස්බුක් හි ඇමතුම් අඩවි යාවත්කාලීන කරමින් සිටියදී අපට මෙම ක්‍රමය අවශ්‍ය බව වැටහුණි. අපට ප්‍රජාවෙන් එකම ප්‍රතිපෝෂණය ලැබුණි. එබැවින් අවසාන නිකුතුවට පෙර තවත් RC එකක් සෑදීමට අපි තීරණය කළෙමු.

අවසානයේදී React.addons.cloneWithProps ඉවත් කිරීමට අපි සැලසුම් කරමු. අපි තවම එය කරන්නේ නැත, නමුත් මෙය ඔබේම භාවිතයන් ගැන සිතීම ආරම්භ කිරීමට හොඳ අවස්ථාවක් වන අතර ඒ වෙනුවට React.cloneElement භාවිතා කිරීම ගැන සලකා බලන්න. අපි එය ඉවත් කිරීමට පෙර ක්ෂය කිරීමේ දැන්වීම් සහිත නිකුතුවක් යැවීමට වග බලා ගන්නෙමු, එබැවින් ක්ෂණික ක්‍රියාමාර්ගයක් අවශ්‍ය නොවේ.

තවත් මෙහි ...

දේපල හුවමාරුව සිදු කිරීමට ඔබට ඉඩ සලසන හොඳම ක්‍රමය childrenක්‍රියාකාරී රටාවකට සමානය https://medium.com/merrickchristensen/function-as-child-components-5f3920a9ace9

කේත ස්නිපටය: https://stackblitz.com/edit/react-fcmubc

උදාහරණයක්:

const Parent = ({ children }) => {
    const somePropsHere = {
      style: {
        color: "red"
      }
      // any other props here...
    }
    return children(somePropsHere)
}

const ChildComponent = props => <h1 {...props}>Hello world!</h1>

const App = () => {
  return (
    <Parent>
      {props => (
        <ChildComponent {...props}>
          Bla-bla-bla
        </ChildComponent>
      )}
    </Parent>
  )
}

පෙළ නූල් වැනි සංරචක ප්‍රතික්‍රියා නොකරන දරුවන් ලැබීම පිළිබඳ ප්‍රශ්නයට කිසිදු පිළිතුරක් ආමන්ත්‍රණය නොකරයි . වැඩ කිරීම මේ වගේ දෙයක් විය හැකිය:

// Render method of Parent component
render(){
    let props = {
        setAlert : () => {alert("It works")}
    };
    let childrenWithProps = React.Children.map( this.props.children, function(child) {
        if (React.isValidElement(child)){
            return React.cloneElement(child, props);
        }
          return child;
      });
    return <div>{childrenWithProps}</div>

}

මම එය භාවිතා වැඩ කිරීමට ඉහත පිළිගත් පිළිතුර විසින් අදාල කරුණ නිවැරදි කිරීමට අවශ්ය බව වෙනුවට මෙම පහිටුම් දක්වනය. මෙය සිතියම් ශ්‍රිතයේ විෂය පථය තුළ doSomething ශ්‍රිතය අර්ථ දක්වා නොමැත.

var Parent = React.createClass({
doSomething: function() {
    console.log('doSomething!');
},

render: function() {
    var that = this;
    var childrenWithProps = React.Children.map(this.props.children, function(child) {
        return React.cloneElement(child, { doSomething: that.doSomething });
    });

    return <div>{childrenWithProps}</div>
}})

යාවත්කාලීන කිරීම: මෙම විසඳුම ECMAScript 5 සඳහා වන අතර, ES6 හි var හි අවශ්‍යතාවයක් නොමැත = මෙය

දරුවන් එකක් හෝ වැඩි ගණනක් සලකා බැලීමේ පිරිසිදු ක්‍රමය

<div>
   { React.Children.map(this.props.children, child => React.cloneElement(child, {...this.props}))}
</div>

ඔබට තවදුරටත් අවශ්‍ය නොවේ {this.props.children}. දැන් ඔබ භාවිතා ඔබේ දරුවා අංගයක් ආවරණය කරනවා හැක renderදී Routeසුපුරුදු පරිදි ඔබගේ මුක්කු සමත්:

<BrowserRouter>
  <div>
    <ul>
      <li><Link to="/">Home</Link></li>
      <li><Link to="/posts">Posts</Link></li>
      <li><Link to="/about">About</Link></li>
    </ul>

    <hr/>

    <Route path="/" exact component={Home} />
    <Route path="/posts" render={() => (
      <Posts
        value1={1}
        value2={2}
        data={this.state.data}
      />
    )} />
    <Route path="/about" component={About} />
  </div>
</BrowserRouter>

Parent.jsx:

import React from 'react';

const doSomething = value => {};

const Parent = props => (
  <div>
    {
      !props || !props.children 
        ? <div>Loading... (required at least one child)</div>
        : !props.children.length 
            ? <props.children.type {...props.children.props} doSomething={doSomething} {...props}>{props.children}</props.children.type>
            : props.children.map((child, key) => 
              React.cloneElement(child, {...props, key, doSomething}))
    }
  </div>
);

Child.jsx:

import React from 'react';

/* but better import doSomething right here,
   or use some flux store (for example redux library) */
export default ({ doSomething, value }) => (
  <div onClick={() => doSomething(value)}/>
);

සහ main.jsx:

import React from 'react';
import { render } from 'react-dom';
import Parent from './Parent';
import Child from './Child';

render(
  <Parent>
    <Child/>
    <Child value='1'/>
    <Child value='2'/>
  </Parent>,
  document.getElementById('...')
);

උදාහරණය මෙතැනින් බලන්න: https://plnkr.co/edit/jJHQECrKRrtKlKYRpIWl?p=preview

සමහර විට ඔබට මෙම අංගය ප්‍රයෝජනවත් විය හැකිය, බොහෝ අය මෙය ප්‍රති-රටාවක් ලෙස සලකනු ලැබුවද, ඔබ කරන්නේ කුමක්දැයි ඔබ දන්නේ නම් සහ ඔබේ විසඳුම හොඳින් සැලසුම් කරන්නේ නම් එය තවමත් භාවිතා කළ හැකිය.

ළමා සංරචක ලෙස ක්රියා කිරීම

ඔබට මුක්කු යැවීමට අවශ්‍ය දරුවන් කිහිප දෙනෙකු සිටී නම් , ඔබට එය මේ ආකාරයෙන් කළ හැකිය, React.Children.map:

render() {
    let updatedChildren = React.Children.map(this.props.children,
        (child) => {
            return React.cloneElement(child, { newProp: newProp });
        });

    return (
        <div>
            { updatedChildren }
        </div>
    );
}

ඔබේ සංරචකයට ඇත්තේ එක් දරුවෙකු පමණක් නම්, සිතියම් ගත කිරීමේ අවශ්‍යතාවයක් නොමැත, ඔබට එකවරම ක්ලෝන කළ හැකිය:

render() {
    return (
        <div>
            {
                React.cloneElement(this.props.children, {
                    newProp: newProp
                })
            }
        </div>
    );
}

හි ලේඛනවලට අනුව cloneElement()

React.cloneElement(
  element,
  [props],
  [...children]
)

ආරම්භක ස්ථානය ලෙස මූලද්‍රව්‍යය භාවිතා කර නව ප්‍රතික්‍රියා මූලද්‍රව්‍යයක් ක්ලෝන කර ආපසු එවන්න. එහි ප්‍රති ing ලයක් ලෙස මූලද්‍රව්‍යයේ මුක්කු නොගැඹුරු ලෙස ඒකාබද්ධ වන නව මුක්කු ඇත. නව දරුවන් දැනට සිටින දරුවන් වෙනුවට ආදේශ කරනු ඇත. මුල් මූලද්‍රව්‍යයේ යතුර සහ ref සංරක්ෂණය කෙරේ.

React.cloneElement() බොහෝ දුරට සමාන වේ:

<element.type {...element.props} {...props}>{children}</element.type>

කෙසේ වෙතත්, එය refs ද ආරක්ෂා කරයි. මෙයින් අදහස් කරන්නේ ඔබ එය මත යොමු වූ දරුවෙකු ලබා ගන්නේ නම්, ඔබ එය ඔබේ මුතුන්මිත්තන්ගෙන් අහම්බෙන් සොරකම් නොකරන බවයි. ඔබගේ නව අංගයට අමුණා ඇති එකම ref එක ඔබට ලැබෙනු ඇත.

එබැවින් ළමයින්ට අභිරුචි මුක්කු ලබා දීමට ඔබ භාවිතා කරන්නේ ක්ලෝනඑලෙමන්ට් ය. කෙසේ වෙතත්, සංරචකයේ ළමුන් කිහිප දෙනෙකු සිටිය හැකි අතර ඔබට එය ඉක්මවා යා යුතුය. වෙනත් පිළිතුරු යෝජනා කරන්නේ ඔබට ඒවා භාවිතයෙන් සිතියම් ගත කිරීමයි React.Children.map. කෙසේ වෙතත් වෙනස්වීම් React.Children.mapමෙන් නොව React.cloneElementමූලද්‍රව්‍යයේ යතුරු එකතු වන .$අතර උපසර්ගය ලෙස අමතර වේ. වැඩි විස්තර සඳහා මෙම ප්‍රශ්නය පරීක්ෂා කරන්න: React.Children.map තුළ React.cloneElement මූලද්‍රව්‍ය යතුරු වෙනස් කිරීමට හේතු වේ

ඔබට එය වළක්වා ගැනීමට අවශ්‍ය නම්, ඒ වෙනුවට ඔබ forEachවැනි ශ්‍රිතයට යා යුතුය

render() {
    const newElements = [];
    React.Children.forEach(this.props.children, 
              child => newElements.push(
                 React.cloneElement(
                   child, 
                   {...this.props, ...customProps}
                )
              )
    )
    return (
        <div>{newElements}</div>
    )

}

ක්රමය 1 - ළමයින් ක්ලෝන කරන්න

const Parent = (props) => {
   const attributeToAddOrReplace= "Some Value"
   const childrenWithAdjustedProps = React.Children.map(props.children, child =>
      React.cloneElement(child, { attributeToAddOrReplace})
   );

   return <div>{childrenWithAdjustedProps }</div>
}

ක්රමය 2 - සංයුක්ත සන්දර්භය භාවිතා කරන්න

සන්දර්භය මඟින් ගැඹුරු ළමා සංරචකයකට මුක්කු යවා එය අතර ඇති සංරචක හරහා මුක්කු ලෙස පැහැදිළිවම යොමු නොකරයි.

සන්දර්භය අඩුපාඩු සමඟ පැමිණේ:

1. දත්ත විධිමත්ව ගලා එන්නේ නැත - මුක්කු හරහා.
2. සන්දර්භය භාවිතා කිරීම පාරිභෝගිකයා සහ සැපයුම්කරු අතර ගිවිසුමක් ඇති කරයි. සංරචකයක් නැවත භාවිතා කිරීම සඳහා අවශ්‍ය වන අවශ්‍යතා තේරුම් ගැනීම සහ අනුකරණය කිරීම වඩා දුෂ්කර විය හැකිය.

සංයුක්ත සන්දර්භයක් භාවිතා කිරීම

export const Context = createContext<any>(null);

export const ComposableContext = ({ children, ...otherProps }:{children:ReactNode, [x:string]:any}) => {
    const context = useContext(Context)
    return(
      <Context.Provider {...context} value={{...context, ...otherProps}}>{children}</Context.Provider>
    );
}

function App() {
  return (
      <Provider1>
            <Provider2> 
                <Displayer />
            </Provider2>
      </Provider1>
  );
}

const Provider1 =({children}:{children:ReactNode}) => (
    <ComposableContext greeting="Hello">{children}</ComposableContext>
)

const Provider2 =({children}:{children:ReactNode}) => (
    <ComposableContext name="world">{children}</ComposableContext>
)

const Displayer = () => {
  const context = useContext(Context);
  return <div>{context.greeting}, {context.name}</div>;
};

@And_rest පිළිතුරට අමතරව, මම ළමයින් ක්ලෝන කර පන්තියක් එක් කරන්නේ එලෙසයි.

<div className="parent">
    {React.Children.map(this.props.children, child => React.cloneElement(child, {className:'child'}))}
</div>

මෙම තත්වය හැසිරවීමට සුදුසුම ක්‍රමය රෙන්ඩර් මුක්කු යැයි මම සිතමි

මේ වගේ දෙයක් දෙස බැලීමට දෙමාපිය කේතය ප්‍රතිනිර්මාණය කිරීමෙන් ළමා සංරචකයේ භාවිතා කිරීමට අවශ්‍ය මුක්කු ලබා දීමට ඔබ දෙමාපියන්ට ඉඩ දී ඇත:

const Parent = ({children}) => {
  const doSomething(value) => {}

  return children({ doSomething })
}

එවිට ළමා සංරචකය තුළ ඔබට දෙමව්පියන් විසින් සපයනු ලබන ශ්‍රිතයට ප්‍රවේශ විය හැකිය:

class Child extends React {

  onClick() => { this.props.doSomething }

  render() { 
    return (<div onClick={this.onClick}></div>);
  }

}

දැන් පෙම්වතාගේ ව්‍යුහය මේ ආකාරයෙන් පෙනෙනු ඇත:

<Parent>
  {(doSomething) =>
   (<Fragment>
     <Child value="1" doSomething={doSomething}>
     <Child value="2" doSomething={doSomething}>
    <Fragment />
   )}
</Parent>

ක්‍රියාකාරී සංරචක භාවිතා කරන විට, TypeError: Cannot add property myNewProp, object is not extensibleනව ගුණාංග සැකසීමට උත්සාහ කිරීමේදී ඔබට බොහෝ විට දෝෂය ලැබෙනු ඇත props.children. මුක්කු ක්ලෝන කිරීමෙන් පසුව නව මුක්කු වලින් දරුවා ක්ලෝන කිරීමෙන් මේ සඳහා වැඩක් තිබේ.

const MyParentComponent = (props) => {
  return (
    <div className='whatever'>
      {props.children.map((child) => {
        const newProps = { ...child.props }
        // set new props here on newProps
        newProps.myNewProp = 'something'
        const preparedChild = { ...child, props: newProps }
        return preparedChild
      })}
    </div>
  )
}

මෙය කළ හැකි සරලම ක්‍රමය:

    {React.cloneElement(this.props.children, this.props)}

තනි ළමා අංගයක් ඇති ඕනෑම කෙනෙකුට මෙය කළ යුතුය.

{React.isValidElement(this.props.children)
                  ? React.cloneElement(this.props.children, {
                      ...prop_you_want_to_pass
                    })
                  : null}

ඔබට අවශ්‍ය වන්නේ මෙයද?

var Parent = React.createClass({
  doSomething: function(value) {
  }
  render: function() {
    return  <div>
              <Child doSome={this.doSomething} />
            </div>
  }
})

var Child = React.createClass({
  onClick:function() {
    this.props.doSome(value); // doSomething is undefined
  },  
  render: function() {
    return  <div onClick={this.onClick}></div>
  }
})

React.children මා වෙනුවෙන් වැඩ නොකිරීමට යම් හේතුවක්. මට වැඩ කළේ මෙයයි.

මට අවශ්‍ය වූයේ දරුවාට පන්තියක් එක් කිරීමට ය. මුක්කු වෙනස් කිරීමට සමානයි

 var newChildren = this.props.children.map((child) => {
 const className = "MenuTooltip-item " + child.props.className;
    return React.cloneElement(child, { className });
 });

 return <div>{newChildren}</div>;

මෙහි උපක්‍රමය වන්නේ React.cloneElement ය . ඔබට ඕනෑම මුක්කු සමාන ආකාරයකින් සමත් විය හැකිය

රෙන්ඩර් මුක්කු යනු මෙම ගැටලුවට වඩාත් නිවැරදි ප්‍රවේශයයි. ළමයින්ගේ මුක්කු ලෙස ළමා සංරචකය මව් සංරචකයට යැවීම වෙනුවට, දෙමව්පියන් විසින් ළමා සංරචකය අතින් ඉදිරිපත් කිරීමට ඉඩ දෙන්න. Render යනු ප්‍රතික්‍රියා පරාමිතීන් වන අතර එය ක්‍රියාකාරී පරාමිතිය ගනී. මෙම ශ්‍රිතයේ දී ඔබට අභිරුචි පරාමිතීන් සමඟ ඔබට අවශ්‍ය ඕනෑම දෙයක් ඉදිරිපත් කිරීමට මව් සංරචකයට ඉඩ දිය හැකිය. මූලික වශයෙන් එය ළමා මුක්කු මෙන් ම කරන නමුත් එය වඩාත් අභිරුචිකරණය කළ හැකිය.

class Child extends React.Component {
  render() {
    return <div className="Child">
      Child
      <p onClick={this.props.doSomething}>Click me</p>
           {this.props.a}
    </div>;
  }
}

class Parent extends React.Component {
  doSomething(){
   alert("Parent talks"); 
  }

  render() {
    return <div className="Parent">
      Parent
      {this.props.render({
        anythingToPassChildren:1, 
        doSomething: this.doSomething})}
    </div>;
  }
}

class Application extends React.Component {
  render() {
    return <div>
      <Parent render={
          props => <Child {...props} />
        }/>
    </div>;
  }
}

කෝඩපන් හි උදාහරණය

මම මෙම තනතුරට පැමිණියේ ඒ හා සමාන අවශ්‍යතාවයක් සඳහා පර්යේෂණ කරන අතරතුරය, නමුත් මට දැනුනේ ක්ලෝනකරණ විසඳුමක් එතරම් ජනප්‍රිය වී ඇති බවත්, එය අමු විය යුතු බවත්, මගේ අවධානය ක්‍රියාකාරීත්වයෙන් ඉවතට ගන්නා බවත්ය.

ප්‍රතික්‍රියා ලේඛනයේ ඉහළ ඇණවුම් සංරචකවල ලිපියක් මට හමු විය

මෙන්න මගේ නියැදිය:

import React from 'react';

const withForm = (ViewComponent) => {
    return (props) => {

        const myParam = "Custom param";

        return (
            <>
                <div style={{border:"2px solid black", margin:"10px"}}>
                    <div>this is poc form</div>
                    <div>
                        <ViewComponent myParam={myParam} {...props}></ViewComponent>
                    </div>
                </div>
            </>
        )
    }
}

export default withForm;


const pocQuickView = (props) => {
    return (
        <div style={{border:"1px solid grey"}}>
            <div>this is poc quick view and it is meant to show when mouse hovers over a link</div>
        </div>
    )
}

export default withForm(pocQuickView);

උසස් ඇණවුම් සංරචක රටාව ක්‍රියාත්මක කිරීමේදී නම්යශීලී විසඳුමක් මට හමු විය.

ඇත්ත වශයෙන්ම එය ක්‍රියාකාරීත්වය මත රඳා පවතී, නමුත් වෙනත් අයෙකු සමාන අවශ්‍යතාවයක් සොයන්නේ නම් එය හොඳයි, ක්ලෝනකරණය වැනි අමු මට්ටමේ ප්‍රතික්‍රියා කේතය මත යැපීමට වඩා එය හොඳය.

මම සක්‍රියව භාවිතා කරන අනෙක් රටාව වන්නේ බහාලුම් රටාවයි. ඒ ගැන කියවන්න, එහි බොහෝ ලිපි තිබේ.

ඉහත සියලු පිළිතුරු වලින් ආශ්වාදයක් ලබා ඇති අතර මෙය මා විසින් කර ඇත. මම සමහර දත්ත, සහ සමහර සංරචක වැනි මුක්කු පසු කරමි.

import React from "react";

const Parent = ({ children }) => {
  const { setCheckoutData } = actions.shop;
  const { Input, FieldError } = libraries.theme.components.forms;

  const onSubmit = (data) => {
    setCheckoutData(data);
  };

  const childrenWithProps = React.Children.map(
    children,
    (child) =>
      React.cloneElement(child, {
        Input: Input,
        FieldError: FieldError,
        onSubmit: onSubmit,
      })
  );

  return <>{childrenWithProps}</>;
};