javascript - Trying to pass JSON object REACTJS not working - Stack Overflow

admin管理员组

文章数量:1405388

I am starting to get involved in ReactJS, I am trying to pass to my tag a JSON object so then I can show it in the UI but it keeps saying that element is not found. Any help on this? Or why the props object is not having the JSON object? Thanks in advance

var CommentBox = React.createClass({
  render: function() {
    return (
        <div className="img-container">
            <img src="{this.props.placementImage}" />
        </div>
    );
  }
});

var MP = [
    {
        id: "MP1001",
        placementImage: ".png",
        dts: "forever",
        dte: "forever",
        status: "",
        isDefault: false
    }
];

ReactDOM.render(
        <CommentBox mp={MP}/>,
        document.getElementById('content')
);

I am starting to get involved in ReactJS, I am trying to pass to my tag a JSON object so then I can show it in the UI but it keeps saying that element is not found. Any help on this? Or why the props object is not having the JSON object? Thanks in advance

var CommentBox = React.createClass({
  render: function() {
    return (
        <div className="img-container">
            <img src="{this.props.placementImage}" />
        </div>
    );
  }
});

var MP = [
    {
        id: "MP1001",
        placementImage: "https://www.aexp-static./intl/uk/rwd/images/UKHP_CM_promo_3.png",
        dts: "forever",
        dte: "forever",
        status: "",
        isDefault: false
    }
];

ReactDOM.render(
        <CommentBox mp={MP}/>,
        document.getElementById('content')
);

• javascript
• json
• reactjs
• react-native

Share Improve this question Follow asked Jan 20, 2016 at 20:44 JorgeJorge 4311 silver badge99 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

A couple things:

1. You're passing an array as the mp prop, but then attempting to access it like an object.

2. You need to remove the quotes from the <img> src attribute:

3. You need to access the actual mp prop

For reference, I've created a JSBin example from your code that fixes these issues: http://jsbin./bohoqa/edit?html,js,output

var CommentBox = React.createClass({
  render: function() {
    return (
        <div className="img-container">
            <img src={this.props.mp.placementImage} />
        </div>
    );
  }
});

var MP = [
    {
        id: "MP1001",
        placementImage: "https://www.aexp-static./intl/uk/rwd/images/UKHP_CM_promo_3.png",
        dts: "forever",
        dte: "forever",
        status: "",
        isDefault: false
    }
];

ReactDOM.render(
        <CommentBox mp={MP[0]}/>,
        document.getElementById('content')
);

change

<img src="{this.props.placementImage}" />

to

<img src={this.props.mp[index].placementImage} />

You have to pass them as objects {} not "{}"

edit: I did not notice it was an array

本文标签： javascriptTrying to pass JSON object REACTJS not workingStack Overflow