javascript - 如何将带有 @ 符号的 JSON 传递给 React 中的 props

Question

我正在使用 axios 和 React 从数据库请求 json 数据。我能够获取 json 并将其分配给 state 并将其作为 props 传递给我的应用程序中的子组件。我遇到的问题是 json 中的某些对象以“@”符号开头并引发语法错误。

    var Events = React.createClass({
    getInitialState: function() {
    return {
      events: [],
    }
  },
  componentDidMount: function() {
    var _this = this;
    this.serverRequest = 
      axios
        .get("MY URL STRING HERE")
        .then(function(result) {
          _this.setState({
            events: result.data
          });
        })
  },
  componentWillUnmount: function() {
    this.serverRequest.abort();
  },
    render: function() {
        return (
            <div>
                {this.state.events.map(function(event) {
                    return (
                        <div>
                            <Event title={event.EventTitle} date={event.EventDate} description={event.EventDescription} presentor={event.EventPresenters} location={event.EventLocation} registered={event.registeredusercount} max_reg={event.EventMaximumAttendees} key={event.@unid} id={key} status={event.status} />
                        </div>
                    ) 
                })};
            </div>
        )
    }
});

Answer 1

我假设你的问题不在于解析数据，而在于 React 将对象作为 props 向下传递？如果是这样，您应该能够通过字符串动态访问属性 with bracket notation ，就像这样。

let foo = {'@bar': 'test'};
foo.@bar;
// => Uncaught SyntaxError: Invalid or unexpected token

foo['@bar'];
// => 'test'

对于您的组件，它将是:

<Event key={event['@unid']} />