How do I use '@{this.xxx}' (like 'ref' in React) in sciter-js?

[Heap-Hop]

Hi, we could use ‘@{this.xxx}’ in sciter-tis by binding element easily,but I can't find the same method at sciter-js's doc. Do we have the same syntactic sugar at sciter-js now? Thx!

[c-smile]

No such construct in Sciter.JS.

Usually this.xxx can be replaced by this.$("xxx selector).

If you need exactly this.xxx then:

componentDidMount() {
  this.xxx = this.$("xxx selector);
}

[Heap-Hop]

componentDidMount() {   
  this.xxx = this.$("xxx selector); 
} 

Yes,I'm using this method to solve my problem, but it's not good for some conditional rendering:

class MyElement extends Element {
    show = false;
    btn = null;
    componentDidMount(){
        this.btn = this.$("button");
    }
    render(){
        return(<div id="my-element">
            {this.show?<button>Btn</button>:<div/>}
        </div>)
    }
}

// sometime
setTimeout(() => {
    $("#my-element").componentUpdate({
        show:true
    })
    console.log("btn",$("#my-element").btn.innerText)
}, 1000);

[c-smile]

for some conditional rendering

But how @{this.xxx} will help you in this case?

[Heap-Hop]

yes,you are right, @{this.xxx} in tis is not help me, I just try same thing in sciter-tis, `@{this.xxx} didn't help at all,

in React.js ,it can work with:

// Reacj.js
class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      show:false
    }
  }
  componentDidMount(){
    // sometime
    setTimeout(() => {
      // the rendering is synchronous in my test
      this.setState({
        show:true
      })
      // so we will catch element correctly
      console.log(this.innerEl.innerHTML)
    }, 1000);
  }
  render(){
    return(<div>
        {this.state.show?<button ref={e=>this.innerEl = e}>Btn</button>:<div/>}
      </div>
    );
  }
}

In sciter,componentUpdate() or update() maybe make a asynchronous rendering.

It's fine, we can also use other method to catch element.