Question

该类接收__setitem__，它是另一个组件的名称，但它没有正确呈现。

props.name

当我手动编写Component的名称时，组件呈现正常。例如：

class Component extends React.Component{
  constructor(props){
    super(props);
  }

  render(){
    var Element = this.props.name;
    return (  
        <Element />
    )
  }
}

const Dropdown = () =>{
    return(
    <div>
       <select>
          <option value="initial" selected>Select...</option>
          <option value="grapefruit">Grapefruit</option>
          <option value="lime">Lime</option>
          <option value="coconut">Coconut</option>
        </select>
    </div>
  )
}

class App extends React.Component {
  state = {
    components: []
  };

  render() {
    return (
      <div>
        <Component components={this.state.components} name="Dropdown" />          
      </div>
    );
  }
}

ReactDOM.render(<App />, mountNode);

Answer 1

您希望如何从字符串???

生成Component

这样做：

class App extends React.Component {
  state = {
    components: []
  };

  render() {
    return (
      <div>
        <Component components={this.state.components} name={Dropdown} />          
      </div>
    );
  }
}

Answer 2

您需要将props作为标记参数传递。例如：。见下面的例子。

class parent extends React.Component{
constructor(){
super();
this.state={
   name:'ABC',
 }
}
render(){
   return(
  <Child argument={this.state.name} />
  )
 }
}

//stateless component don't have state
 function Child(props){
 return <div>{this.props.arguments}</div>
}

Answer 3

不是从父组件传递字符串，而是像这样传递：

<Component components={this.state.components} name={Dropdown} />

我认为理由是：

<Element>将转换为React.createElement(Element, {})并且期望第一个参数作为反应组件名称或字符串（HTML标记），因为您要渲染反应组件，所以不要通过名称为字符串。

Answer 4

在render()方法中，您必须返回一个React元素。 React元素必须是DOM元素的表示。在你的情况下，你正在尝试渲染一个字符串，这就是为什么没有呈现（如你所说）“正确”的原因。请参阅render()方法here的文档。

我已更新您的代码，以便成功呈现name组件：

class Component extends React.Component{
  constructor(props){
    super(props);
  }

  render(){
    var Element = this.props.name;
    return (
    <div>
      {Element}
    </div>
    )
  }
}

const Dropdown = () =>{
    return(
    <div>
       <select>
          <option value="initial" selected>Select...</option>
          <option value="grapefruit">Grapefruit</option>
          <option value="lime">Lime</option>
          <option value="coconut">Coconut</option>
        </select>
    </div>
  )
}

class App extends React.Component {
  state = {
    components: []
  };

  render() {
    return (
      <div>
        <Component 
        components={this.state.components}       
        name={<div>Dropdown</div>}/>          
      </div>
    );
  }
}


React.render(<App/> , document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js"></script>
<div id="app"></div>

如何使用变量或道具渲染组件？

4 个答案: