Question

所以，我有一个像这样的课：

class Blah extends Component {
  constructor(props) {
    super(props);
  }

  handleComponent = (event) => {

    let divid = event.target.getAttribute('id');

    if (divid === 'col') {
      // I want to render component by this condition
    } else if (divid === 'ro') {
      // or I want to render component by this condition
    } else {
      //or I want to render component by this condition
    }
  };

  render() {
    const { classes } = this.props;

    return (
      <div>
        <div id = 'col' onClick={this.handleComponent}>Sheep</div>
        <div id = 'ro' onClick={this.handleComponent}>Cow</div>
        <div id = 'ball' onClick={this.handleComponent}>Dog</div>
        { I want to render my component here after click }
      </div>
    );
  }
}

我在此之上还有另一个课：

class Flow extends Component {
  constructor(props){
    super(props);
  };

  render() {
    return(
      <div style={{background:'somecolor'...blah blah}}>Clap</div>             
    );
  }
}

我正在通过：

var foo = withStyles(styles)(Flow)

我已经尝试过返回组件，但是我什么都没得到。

我可以使用三元运算符，但它仍将仅呈现两个运算符之一，但是我有三个组件，每个组件都有三个设计。

我要渲染其中一个，以在如上所述的某种条件下渲染。

如果我使用用于切换的状态，那么它也将具有两个要渲染的组件。不要继续编写代码，它已经组成了，所以有什么想法吗？碎片？任何帮助将不胜感激。谢谢。

Answer 1

要按条件呈现组件，只需使用switch语句。

在我的示例中，我们使用state存储current有效组件。

renderMyComponent方法负责呈现三个可能组件之一。

handleChange方法更改current状态并触发render组件的新App。

此示例使用class properties插件。

renderMyComponent = () => {

表示自动绑定，与在构造方法中使用的相同

this.renderMyComponent = this.renderMyComponent.bind(this);

工作示例：

const ComponentOne = () => <div>Hi, i am component one</div>;
const ComponentTwo = () => <div>Hi, i am component two</div>;
const ComponentThree = () => <div>Hi, i am component three</div>;


class App extends React.Component {
  state = { current: 0 }
  
  renderMyComponent = () => {
    // Our switch conditional render
    switch(this.state.current) {
      case 0:
        return <ComponentOne />;
      case 1:
        return <ComponentTwo />;
      case 2:
        return <ComponentThree />;
      default:
        return null;
    }
  }
  
  handleChange = (event) => {
    // We are looking for data-trigger attribute
    // In this example we expect type number but trigger holds string
    // That's why we 'cast' to a number using Number()
    const current = Number(event.target.dataset.trigger);
    // Sets new state of current component and triggers new render
    this.setState({ current })
  }
  
  render() {
    return (
      <div>
        <div>
          Pick component to render
          <button 
            type="button" 
            data-trigger="0"
            onClick={this.handleChange}
          >
            Render 1
          </button>
          <button 
            type="button" 
            data-trigger="1" 
            onClick={this.handleChange}
          >
            Render 2
          </button>
          <button 
            type="button" 
            data-trigger="2" 
            onClick={this.handleChange}
          >
            Render 3
          </button>
        </div>
        {this.renderMyComponent()}
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

查看您的代码：

这里不需要构造函数。

...
constructor(props){
    super(props);

}
...

使用函数从另一个类渲染组件

1 个答案: