Question

我开始介入ReactJS，我试图将一个JSON对象传递给我的标签，然后我可以在UI中显示它，但它一直说没有找到该元素。对此有何帮助？或者为什么props对象没有JSON对象？提前致谢

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.com/intl/uk/rwd/images/UKHP_CM_promo_3.png",
        dts: "forever",
        dte: "forever",
        status: "",
        isDefault: false
    }
];

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

Answer 1

一些事情：

您将数组作为mp道具传递，但之后尝试像对象一样访问它。
您需要从<img> src属性中删除引号：
您需要访问实际的mp道具

作为参考，我已经从您的代码中创建了一个修复这些问题的JSBin示例：http://jsbin.com/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.com/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')
);

Answer 2

更改

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

到

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

您必须将它们作为对象传递{}而不是＆＃34; {}＆＃34;

编辑：我没注意到它是一个数组

试图传递JSON对象REACTJS不起作用

2 个答案: