如何在 React 中将整个图像元素作为 prop 传递？

Question

我收到一个 JSON 响应，每个键都有一个图像属性。 此图像属性是具有属性的整个图像元素标记。 我试图将其传递到子组件中，但在尝试呈现时，它只是在页面上显示为纯文本 html。 有没有办法将其呈现为实际图像标签？ 我附上了 JSON 回复的截图

           ` <div className="aspect-[3/2] md:aspect-square overflow-hidden">
        {props.image}
    </div>
    <span className="block py-5">{props.name}</span>`

Answer 1

您可以使用dangerouslySetInnerHTML但您必须将其包装在 span 或 div 或其他东西中：

 // Example class component class Thingy extends React.Component { render() { const {source} = this.props; console.log("rendered"); return ( <span dangerouslySetInnerHTML={{ __html: source }} /> ); } } // Render it ReactDOM.render( <Thingy source={`<img src="https://images.unsplash.com/photo-1490730141103-6cac27aaab94?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80" />`} />, document.getElementById("root") );

 <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>