ReactJS এর ​​"বাইরের" থেকে কীভাবে উপাদান পদ্ধতি অ্যাক্সেস করবেন?

Question

আমি কেন ReactJS এর ​​"বাইরের" থেকে উপাদানগুলির অ্যাক্সেস করতে পারি না? কেন এটি সম্ভব নয় এবং এটি সমাধান করার কোনও উপায় আছে?

কোডটি বিবেচনা করুন:

var Parent = React.createClass({
    render: function() {
        var child = <Child />;
        return (
            <div>
                {child.someMethod()} // expect "bar", got a "not a function" error.
            </div>
        );
    }
});

var Child = React.createClass({
    render: function() {
        return (
            <div>
                foo
            </div>
        );
    },
    someMethod: function() {
        return 'bar';
    }
});

React.renderComponent(<Parent />, document.body);

Comments

আপনার দরকার আছে Pubsub?

— স্লাইডশোপ

Answer 1

আপনি মাধ্যমে করতে চেষ্টা করছেন কি জন্য একটি ইন্টারফেস প্রদান করে প্রতিক্রিয়া refঅ্যাট্রিবিউট । একটি উপাদানকে বরাদ্দ করুন refএবং এর currentবৈশিষ্ট্যটি আপনার কাস্টম উপাদান হবে:

class Parent extends React.Class {
    constructor(props) {
        this._child = React.createRef();
    }

    componentDidMount() {
        console.log(this._child.current.someMethod()); // Prints 'bar'
    }

    render() {
        return (
            <div>
                <Child ref={this._child} />
            </div>
        );
    }
}

দ্রষ্টব্য : এখানে প্রাপ্ত নথি অনুসারে কেবলমাত্র শিশু উপাদানটিকে শ্রেণ হিসাবে ঘোষণা করা হলে এটি কাজ করবে: https://facebook.github.io/react/docs/refs-and-the-dom.html#adding-a- সুত্র-টু-এ-শ্রেণী-কম্পোনেন্ট

2019-04-01 আপডেট করুন: একটি ক্লাস এবং createRefপ্রতি সর্বশেষতম প্রতিক্রিয়া ডকস ব্যবহার করতে উদাহরণ পরিবর্তিত হয়েছে ।

আপডেট 2016-09-19: পরিবর্তিত উদাহরণ থেকে নির্দেশনা প্রতি সুত্র কলব্যাক ব্যবহার করতে স্ট্রিং অ্যাট্রিবিউট ডক্স।ref

Comments

সুতরাং, দুটি সন্তানের উপাদানগুলির মধ্যে কথোপকথনের একমাত্র উপায় উভয়ই রেফ থাকা এবং সাধারণ পিতামাতার একটি প্রক্সি পদ্ধতির মধ্য দিয়ে যেতে হবে?

— এলকিউফালতাবা

প্রতিক্রিয়া ডেটা-চালিত উপাদানগুলিকে উত্সাহ দেয়। একটি শিশুকে এমন কলব্যাক কল করা যাক যা তার পূর্বপুরুষের ডেটা পরিবর্তন করে এবং যখন সেই ডেটা পরিবর্তন হয় তখন অন্য শিশুটি নতুন propsআসবে এবং যথাযথভাবে পুনরায় রেন্ডার করবে।

— রস অ্যালেন

@ রোসঅ্যালেন, হাহা হ্যাঁ, আপনাকে সে ক্ষেত্রেও সেমিকোলনটি সরিয়ে ফেলতে হবে।

— হুসিএনকে

@ হাসিয়েনকে আমি ব্লকটি ব্যবহার করতে পছন্দ করি যদি ফাংশনটির কোনও রিটার্নের মান না থাকে তাই পরবর্তী বিকাশকারী যারা কোডটি পড়ে তা স্পষ্ট হয়। এটি পরিবর্তন করে {(child) => this._child = child}এমন একটি ফাংশন তৈরি করা হবে যা সর্বদা ফিরে আসে true, তবে সেই মানটি রিঅ্যাক্টের refগুণাবলী দ্বারা ব্যবহৃত হয় না ।

— রস অ্যালেন

Answer 2

যদি আপনি বাইরে থেকে প্রতিক্রিয়াগুলিতে ফাংশনগুলি কল করতে চান তবে আপনি তাদের রেন্ডার কম্পোনেন্টের রিটার্ন ভ্যালুতে কল করতে পারেন:

var Child = React.createClass({…});
var myChild = React.renderComponent(Child);
myChild.someMethod();

প্রতিক্রিয়াটির বাইরে কোনও প্রতিক্রিয়া উপাদানটির হ্যান্ডেল পাওয়ার একমাত্র উপায় হ'ল রিঅ্যাক্ট.রেেন্ডার কম্পোনেন্টের রিটার্ন মান সঞ্চয় করে। উত্স ।

Comments

আসলে এটি রিঅ্যাক্ট 16 এর জন্য কাজ করে। ReactDOM রেন্ডার পদ্ধতিটি উপাদানটির একটি রেফারেন্স দেয় (বা স্টেটলেস উপাদানগুলির জন্য নাল দেয়) returns

— ভ্লাদ পোভালাই

Answer 3

বিকল্পভাবে, যদি সন্তানের উপর পদ্ধতিটি স্থিতিশীল হয় (বর্তমান প্রপসের কোনও পণ্য নয়, রাষ্ট্র) তবে আপনি এটিকে সংজ্ঞায়িত করতে পারেন staticsএবং তারপরে আপনি অচল শ্রেণীর পদ্ধতি হিসাবে এটি অ্যাক্সেস করতে পারবেন। উদাহরণ স্বরূপ:

var Child = React.createClass({
  statics: {
    someMethod: function() {
      return 'bar';
    }
  },
  // ...
});

console.log(Child.someMethod()) // bar

Comments

এর উত্স এখানে ।

— tiradc

Answer 4

প্রতিক্রিয়া হিসাবে 16.3 React.createRefব্যবহার করা যেতে পারে, ( ref.currentঅ্যাক্সেস করতে ব্যবহার করুন)

var ref = React.createRef()

var parent = <div><Child ref={ref} /> <button onClick={e=>console.log(ref.current)}</div>

React.renderComponent(parent, document.body)

Answer 5

0.12 এর প্রতিক্রিয়া হওয়ায় এপিআই সামান্য পরিবর্তিত হয়েছে । মাইচাইল্ডের সূচনা করার জন্য বৈধ কোডটি হবে:

var Child = React.createClass({…});
var myChild = React.render(React.createElement(Child, {}), mountNode);
myChild.someMethod();

Answer 6

আপনি পারে এই মত এটা করতে না নিশ্চিত যদি এটি একটি ভাল পরিকল্পনা আছে: D:

class Parent extends Component {
  handleClick() {
    if (this._getAlert !== null) {
      this._getAlert()
    }
  }

  render() {
    return (
      <div>
        <Child>
        {(getAlert, childScope) => (
          <span> {!this._getAlert ? this._getAlert = getAlert.bind(childScope) : null}</span>
        )}
        </Child>
        <button onClick={() => this.handleClick()}> Click me</button>
      </div>
      );
    }
  }

class Child extends Component {
  constructor() {
    super();
    this.state = { count: 0 }
  }

  getAlert() {
    alert(`Child function called state: ${this.state.count}`);
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return this.props.children(this.getAlert, this)
  }
}

Answer 7

কিছু মন্তব্যে উল্লিখিত হিসাবে, ReactDOM.renderআর উপাদান উপাদানটি আর দেয় না। refউদাহরণটি পাওয়ার জন্য উপাদানটির মূল রেন্ডার করার সময় আপনি একটি কলব্যাক পাস করতে পারেন:

// React code (jsx)
function MyWidget(el, refCb) {
    ReactDOM.render(<MyComponent ref={refCb} />, el);
}
export default MyWidget;

এবং:

// vanilla javascript code
var global_widget_instance;

MyApp.MyWidget(document.getElementById('my_container'), function(widget) {
    global_widget_instance = widget;
});

global_widget_instance.myCoolMethod();

Answer 8

এত সহজ উপায়:

বাইরে ফাংশন:

function funx(functionEvents, params) {
  console.log("events of funx function: ", functionEvents);
  console.log("this of component: ", this);
  console.log("params: ", params);
  thisFunction.persist();
}

এটা আবদ্ধ:

constructor(props) {
   super(props);
    this.state = {};
    this.funxBinded = funx.bind(this);
  }
}

দয়া করে এখানে সম্পূর্ণ টিউটোরিয়ালটি দেখুন: বাইরে থেকে প্রতিক্রিয়া অংশের "এটি" কীভাবে ব্যবহার করবেন?