React动态获取对象值场景下，使用eval是否为合理技术方案？

Great question! Let's dive into why using eval() here is a bad idea, and why your bracket notation approach is the right way to handle dynamic property access in React.

Why eval() is Not a Good Choice #

Even though your current eval() implementation works, it comes with critical drawbacks that make it a risky and inefficient choice:

• Security Risks: If the objKey values ever come from an untrusted source (like user input or an unfiltered API response), eval() will execute arbitrary JavaScript code. This opens your app up to code injection attacks—a major security vulnerability. Even if your names array is hardcoded now, you’re establishing a risky pattern that could cause issues if your state data sources change later.
• Performance Overhead: eval() forces the JavaScript engine to parse and compile code at runtime, which is significantly slower than native object property access. In React, where render cycles can happen frequently, this unnecessary performance hit adds up over time.
• Poor Readability & Maintainability: eval(objKey) is ambiguous to other developers (or future you) reading the code. It’s not immediately clear you’re just accessing a state property, whereas this.state[objKey] makes your intent crystal clear at a glance.

Why Bracket Notation is the Superior Approach #

Your alternative implementation using this.state[names[0]] is the standard, recommended way to handle dynamic property access in JavaScript—especially in React:

• Safe: It only accesses object properties, not executing any arbitrary code. There’s zero risk of code injection here.
• Fast: Native bracket notation is optimized by JS engines, making it far more performant than eval().
• Simpler: You don’t need the extra getVal() function anymore. The code in your render() method is concise and directly communicates what you’re doing.
• Scalable: If you add new properties to your state later (e.g., subtitle: 'React Devs') and update the names array to include 'subtitle', your code will work without any other changes.

Original eval() Implementation #

class App extends React.Component {
 constructor() {
 super();
 this.state = {
 title: 'Developers',
 descp: 'They are just amazing! JK',
 names: ['title', 'descp']
 }
 }
 getVal(objKey) {
 let { title, descp } = this.state;
 return eval(objKey);
 }
 render() {
 let {names} = this.state;
 return (
 <div>
 <h2>{this.getVal(names[0])}</h2>
 <div>{this.getVal(names[1])}</div>
 </div>
 )
 }
}
ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Improved Bracket Notation Implementation #

class App extends React.Component {
 constructor() {
 super();
 this.state = {
 title: 'Developers',
 descp: 'They are just amazing! JK',
 names: ['title', 'descp']
 }
 }
 render() {
 let {names} = this.state;
 return (
 <div>
 <h2>{this.state[names[0]]}</h2>
 <div>{this.state[names[1]]}</div>
 </div>
 )
 }
}
ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

In short: Stick with bracket notation for dynamic property access. eval() has almost no valid use cases in modern JavaScript development, especially in React apps where security, performance, and readability are key.

内容的提问来源于stack exchange，提问作者Ahsan Ali