Это правильный вариант использования eval () в Javascript? - PullRequest
Новая
       7

Это правильный вариант использования eval () в Javascript?

0 голосов
/ 30 сентября 2018

Я прошел через https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval

Мне любопытно, есть ли лучший способ передать это имя текущей выбранной панели в handlePanelClick().Строка let currentPanel = eval( this. $ {Name} Panel ); - это то, что меня беспокоит.

Мне нужно, чтобы name было оценено, а затем установлено как часть currentPanel.Если я удаляю eval() до 'this.${name}Panel', то currentPanel не является элементом DOM.

Это правильный вариант использования eval ()? 

        export default class Profiles extends Component {

      constructor(props) {
        super(props);

        this.ul, this.hunterPanel, this.fieldPanel, ...
         // other declarations...
        this.handlePanelClick = this.handlePanelClick.bind(this);

       }

      handlePanelClick(event, name) {
            event.preventDefault();
            const currentScrollPosition = this.ul.scrollLeft;

            let currentPanel = eval(`this.${name}Panel`); //  <-- is this good practice or is there a better way? Removing eval() means `this` is a string and not a reference to the DOM Element that was clicked.
        // move the unordered list to the left into the viewport
            TweenMax.to(this.ul, 0.75, { scrollTo: { x: currentPanel.getBoundingClientRect().left + currentScrollPosition } });    
          }

      render() {
        return (
            <section className="video-slider">
            <ul ref={ul => this.ul = ul}>
              <li ref={ hunterPanel => this.hunterPanel = hunterPanel }>
                /* html elements */
              </li>
              <li ref={ fieldPanel => this.fieldPanel = fieldPanel }>
                /* html elements */
              </li>
             </ul>
    <ul>
          <li><a onClick={() => this.handlePanelClick(event, "hunter")}><span>Hunter</span></a></li>
          <li><a onClick={() => this.handlePanelClick(event, "field")}><span>Field</span></a></li>
</ul>
</section>
    );
  }

Ответы [ 2 ]

0 голосов
/ 30 сентября 2018

Факторы, основанные на принятом ответе Сагива Б.Г. и предложениях от Влаза:

рефакторинг больше Реактив: 

<li><a onClick={() => this.handlePanelClick(event, this.hunterPanel)}><span>Hunter</span></a></li>
          <li><a onClick={() => this.handlePanelClick(event, this.fieldPanel)}><span>Field</span></a></li>

handlePanelClick(event, name) {
event.preventDefault();
const currentScrollPosition = this.ul.scrollLeft;

let currentPanel =  name; // don't do this --> eval(`this.${name}Panel`);
// rest of code
}

рефакторинг больше ванильного javascript-ish: 

<li><a onClick={() => this.handlePanelClick(event, 'hunter')}><span>Hunter</span></a></li>
          <li><a onClick={() => this.handlePanelClick(event, 'field')}><span>Field</span></a></li>

handlePanelClick(event, name) {
event.preventDefault();
const currentScrollPosition = this.ul.scrollLeft;

let currentPanel =  this[`{name}Panel`]; // don't do this --> eval(`this.${name}Panel`);
// rest of code
}
0 голосов
/ 30 сентября 2018

Вы можете использовать обозначение Bracket [] для динамического нацеливания свойства объекта со строкой: 

this[`${name}Panel`]

Кстати, eval - зло.Старайтесь не использовать его, кроме угрозы безопасности, браузеры сбрасывают некоторые оптимизации при использовании eval.

...