Javascript 如何在图像的源标记中使用返回的字符串（React v16.0.0的新功能），例如：<；img src='；返回的字符串'/>；？

我想使用React v16.0.0上的新功能返回字符串，然后在中使用该字符串

当前的行为是什么？

如果我在一个

我可以看到屏幕上显示的字符串（见附件屏幕截图），但我的目标是在

这是我的代码：

// My component that returns strings
 class MyComponent extends Component {
   render(){

    switch (this.props.type) {
      case 'text':
        return this.props.json.data[this.props.Key]
        break
      case 'image':
        return this.props.json.data[this.props.Key]
        break
        default:
        return null
        break
    }
   }
 }

const UserComponent = (props) => {
  return (
    <div>
      {/* this displays the string on the page */}
      <MyComponent type='image' Key='avatar' desc='Abified image'  {...props} />

       {/* If I console.log this line I get <img src={[object object]} /> */}
       <img src={<MyComponent type='image' Key='avatar' desc='Abified image'  {...props} />} />
    </div>
   )
}

// Parent Component
class App extends Component {
constructor(props){
  super(props)
  this.state = {
   json:[]
  }
 }

 // Fetching data from an api
 componentDidMount(){
   fetch("https://reqres.in/api/users/2")
     .then(response => response.json())
     .then(json => {
       this.setState({json: json })
   })
 }

 render() {
 return (
   <div>
     <UserComponent {...this.state}/>
   </div>
  );
 }
}

export default App;

//返回字符串的我的组件
类MyComponent扩展组件{
render（）{
开关（此.props.type）{
案例“文本”：
返回this.props.json.data[this.props.Key]
打破
案例“图像”：
返回this.props.json.data[this.props.Key]
打破
违约：
返回空
打破
}
}
}
const UserComponent=（道具）=>{
返回(
{/*这将在页面上显示字符串*/}
{/*如果我把console.log这行记录下来，我会得到*/}
} />
)
}
//父组件
类应用程序扩展组件{
建造师（道具）{
超级（道具）
此.state={
json:[]
}
}
//从api获取数据
componentDidMount（）{
取回（“https://reqres.in/api/users/2")
.then（response=>response.json（））
。然后（json=>{
this.setState（{json:json}）
})
}
render（）{
返回(
);
}
}
导出默认应用程序；

我怎样才能做到这一点

预期的行为是什么？

我想在

哪些版本的React？

反应v16.0.0

这在以前版本的React中有效吗？

否，因为它是React v16.0.0中的新功能

---

如果要动态设置图像的

src

属性，请使用普通javascript函数而不是组件：

const getImageSrc = props => {
    switch (props.type) {
      case 'text':
      case 'image':
        return props.json.data[props.Key]
    }
}

然后您可以从组件的

render

方法调用它，如下所示：

<img src={ getImageSrc({...this.props, type: 'image', Key: 'avatar'}) } />

因为

<MyComponent type='image' Key='avatar' desc='Abified image' />

---

希望这有帮助。

在我的用例中，它需要是一个组件。如果渲染组件，我的实现当前将返回一个字符串。（我将在我的问题中添加一个屏幕截图以进一步澄清）如您在屏幕截图中所见，如果我呈现

，则

返回的字符串将显示在屏幕上。将您的
getImageSrc
添加为
的方法，然后调用它来获取
字符串
是否是一种好的做法感谢您的指导，纯JavaScript函数是解决后续问题的方法，我想在
案例“image”
时收集所有这些道具，并将它们添加到
的状态。我无法这样做，因为我无法在渲染中设置状态method@AziCode不确定我是否理解，但您可以从
MyComponent
的内部调用
getImageSrc
，并在那里设置状态。如果这不是你想要的，那么请随意提出一个新的问题，详细介绍一下，我来看看
<img src={<MyComponent type='image' Key='avatar' desc='Abified image' {...props} />

const UserComponent = (props) => {
// calculate you src here
 const imageSrc = props.json.data['avatar'];
 return (
   <div> 
     <img src={ imageSrc } />
   </div> 
 )
}