React中如何将组件作为Props传递？组件传参显示为字符串怎么解决？

这个问题我碰到过好几次了，其实核心是要区分清楚传递组件类型和已渲染的React元素两种场景，先给你拆解下：

为什么你的组件显示成字符串？ #

大概率是你错误地把JSX代码用引号包裹成了字符串，比如写成：

// 错误写法！会变成字符串
const customSelect = "<ReactSuperSelect placeholder='Nothing Selected' ... />"

这种写法会让React把它当成普通文本渲染，而不是组件。必须用JSX语法（不带引号，直接写<组件名 />）来创建React元素。

解决方案1：传递已渲染的React元素（直接传成品） #

如果你已经写好了完整的ReactSuperSelect配置，只想让子组件直接渲染它，那就把整个JSX元素作为props传递：

// 父组件
import ReactSuperSelect from './ReactSuperSelect';

class ParentComponent extends React.Component {
  handlerExample = (selectedValues) => {
    // 你的处理逻辑
    console.log(selectedValues);
  }

  render() {
    // 直接用JSX创建元素，赋值给变量
    const mySuperSelect = (
      <ReactSuperSelect 
        placeholder="Nothing Selected" 
        clearSearchOnSelection={true} 
        deselectOnSelectedOptionClick={true} 
        dataSource={testData} 
        multiple={true} 
        onChange={this.handlerExample} 
        keepOpenOnSelection={true} 
        searchable={true} 
      />
    );

    // 把元素作为props传给子组件
    return <ChildComponent customSelect={mySuperSelect} />;
  }
}

// 子组件：直接渲染接收到的元素
function ChildComponent({ customSelect }) {
  // 不需要额外处理，直接把customSelect放到JSX里就行
  return <div className="select-container">{customSelect}</div>;
}

解决方案2：传递组件类型（让子组件灵活控制） #

如果你希望子组件能自定义ReactSuperSelect的部分props，那就把组件本身作为props传递（注意变量名首字母要大写，React会把首字母大写的变量识别为组件）：

// 父组件
import ReactSuperSelect from './ReactSuperSelect';

class ParentComponent extends React.Component {
  handlerExample = (selectedValues) => {
    console.log(selectedValues);
  }

  render() {
    // 把组件本身作为props传递
    return (
      <ChildComponent 
        SelectComponent={ReactSuperSelect} 
        selectProps={{
          placeholder: "Nothing Selected",
          clearSearchOnSelection: true,
          deselectOnSelectedOptionClick: true,
          dataSource: testData,
          multiple: true,
          onChange: this.handlerExample,
          keepOpenOnSelection: true,
          searchable: true
        }}
      />
    );
  }
}

// 子组件：使用接收到的组件类型，并传入props
function ChildComponent({ SelectComponent, selectProps }) {
  // 像使用普通组件一样渲染SelectComponent，把props传进去
  return <SelectComponent {...selectProps} />;
}

关键注意事项 #

• 传递组件类型时，变量名必须首字母大写，否则React会把它当成普通HTML标签处理，导致报错。
• 不要用引号包裹JSX代码，那会变成字符串，必须直接写JSX语法创建React元素。

内容的提问来源于stack exchange，提问作者Developer Strange