如何将字符串作为参数传递并将其附加到REACT状态

Question

我想传递一个字符串作为完成this.state并构建HTML的参数。 我在render（）下面和return上面创建一个箭头函数

const createHtml = (name, stateProperty) => {
  return (
    <h1>{name}</h1>
    <p>{this.state.stateProperty+'_x'}</p>
    <p>{this.state.stateProperty+'_y'}</p>
  )
}

createHtml('Jon', 'company')
// the result should be 
//<h1>{Jon}</h1>
//<p>{this.state.company_x}

我尝试了不同的变体，但均无效果或出现“无法读取媒体资源”

<p>{this.state.${statePropety}+'x'}</p>

Answer 1

{}块的内容是常规Javascript表达式。

因此，您必须将它们编写为常规Javascript，而不是JSX。

您需要this.state[stateProperty + 'x'] 。

Answer 2

这是一个功能组件，因此您没有状态，但有以下支持：

 const createHtml = ({name, Property}) => {
  return (
    <h1>{name}</h1>
    <p>{Property+'_x'}</p>
    <p>{Property+'_y'}</p>
  )
}

并在某个地方使用它：

<createHtml name='Joe' Property = 'something'  />