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

Question

我想传递一个字符串作为参数，完成这个.state并构建HTML。我在render((下面和返回上面创建了一个箭头函数

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

这是一个功能组件，所以你没有状态，但道具so：

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

并在某个地方使用：

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