javascript - 具有部分提供的属性的 JSX 元素文字

Question

使用React.cloneElement可以为部分填充(由于缺乏更好的词)元素提供附加属性。一个人为的例子是:

function createPopulatedElement(el, v) {
    return React.cloneElement(el, {value: v});
}

const ImportantContent = React.createClass({
    render: function() {
       return (
          <strong> {this.props.value} </strong>
       );
    }
});

let populatedElement = createPopulatedElement(<ImportantContent/>, 'foo');

ReactDOM.render(populatedElement , $('#app2')[0]);

现在考虑到<ImportantContent/>在上面的代码中，计算结果 (?) 为:

<strong>{this.props.value}</strong>

...我希望能够做到:

let populatedElement= createPopulatedElement(
    (<span>{this.props.value} </span>),
    'foo');

...无需声明包装器 React 类(在上面的例子中为 ImportantContent )。但是上面的代码失败了:

Uncaught TypeError: Cannot read property 'value' of undefined

...这有点道理。有没有一种方法可以将部分填充的(由于缺乏更好的词)元素作为 JSX 元素文字提供给某些函数或 ReactJS 组件(然后将添加其他属性)，而无需创建类？

(上面的代码是 SSCCE，我知道单独的 createPopulatedElement 函数没有意义，因为当我实例化 value={'foo'} 组件时，我可以直接传递 ImportantContent。)

更新

ctrlplusb 建议使用无状态功能组件。这确实比类要好一些:

let F = (props)=>(<span>{props.value} </span>);
let populatedElement= createPopulatedElement(
              <F/>
          , 'foo');
ReactDOM.render(populatedElement, $('#app3')[0]);

...但是仍然引入了一种新类型( F )。直接使用匿名箭头函数使其更加紧凑并避免引入单独的类型导致解析失败:

let populatedElement= createPopulatedElement(
         <(props)=>(
                <span>{props.value} </span>
                   )
         />
     , 'foo');

Answer 1

你就快到了 - 当你创建一个无状态组件并一次性使用它时，你需要手动将它包装在 React.createElement 中而不是使用 JSX:

let populatedElement= createPopulatedElement(
  React.createElement(props => <span>{props.value}</span>),
  'foo'
);