[英]React : Call a function from inside render function
I have referred to couple of similar questions, but I have a situation little different. 我已经提到过几个类似的问题,但情况略有不同。
Call a React Function from inside Render 从渲染器内部调用React函数
How to Call a Function inside a Render in React/Jsx 如何在React / Jsx中的渲染器内部调用函数
React: Cant call a function inside child component 反应:不能在子组件内部调用函数
export default class CodeEditor extends React.Component { appendAssets(asset) { console.log(asset) this.refs.editor.editor.insert(`player.asset('${asset}')`) this.refs.editor.editor.focus() } render() { function sequenceHierarchy (data, outputArray) { level++ data.forEach(function (asset){ outputArray.push(<li className={`level_${level}`}><button onClick={_ => this.appendAssets(asset.name)}>{asset.name}</button></li>) if(asset.children.length) { sequenceHierarchy(asset.children, outputArray) } }) level-- } } }
So the onClick
of button inside sequenceHierarchy
function has to call appendAssets
. 因此,
sequenceHierarchy
函数内部的按钮的onClick
必须调用appendAssets
。 Of course since this
wouldn't be able to call it as it is not the part of this component, I also tried with just appendAssets(asset.name)
, still it gives a error of Uncaught ReferenceError: appendAssets is not defined
当然,因为
this
将不能够调用它,因为它是不是该组件的一部分,我也只是尝试appendAssets(asset.name)
它仍然给人一种错误Uncaught ReferenceError: appendAssets is not defined
I strongly advise you to read this answer for understanding this
keyword and its behaviors inside function. 我强烈建议您阅读此答案,以了解
this
关键字及其在函数内部的行为。
Quoting from the linked answer: 引用链接的答案:
this (aka "the context") is a special keyword inside each function and its value only depends on how the function was called , not how/when/where it was defined.
这个(又名“上下文”)是每个函数内部的一个特殊关键字, 其值仅取决于函数的调用方式 ,而不取决于函数的定义方式/定义时间/位置。 It is not affected by lexical scope, like other variables.
像其他变量一样,它不受词汇范围的影响。
(Please read whole linked answer before proceeding further) (请先阅读完整的链接答案,然后再继续)
You can either set a reference to the variable which refers to correct this
. 您可以设置为是指纠正变量的引用
this
。 See this JSFiddle 看到这个JSFiddle
let that = this; // assign this reference to variable that.
function sequenceHierarchy (data, outputArray) {
data.forEach((item) => {
outputArray.push(
<li>
<button onClick={that.appendAssets.bind(this, item)}>
Append {item}
</button>
</li>
);
})
}
or 要么
You can use bind method to set correct this
, while invoking sequenceHierarchy
function as follows. 您可以使用bind方法设置更正
this
,同时调用sequenceHierarchy
函数,如下所示。 See this JSFiddle 看到这个JSFiddle
{sequenceHierarchy.bind(this, (['1', '2', '3'], []))}
or 要么
You can use ES6 arrow function to invoke sequenceHierarchy
function like this. 您可以像这样使用ES6箭头函数来调用
sequenceHierarchy
函数。
{() => {sequenceHierarchy(['1', '2', '3'], [])}}
All above methods will work fine. 以上所有方法都可以正常工作。
Hope this helps :) 希望这可以帮助 :)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.