反应组件：如何从道具中设置仅键属性？

Question

I am building a simple react-native component, which uses itself a component which requires an attribue which is only a key. For example:

export default class MyComponent extends Component {
  render() {
    return (
      <LineChart bezier />
    );
  }
}

The component my component uses is LineChart , which expects an attribute like bezier .
I don't know how I could pass this attribute to LineChart in a dynamic way, ie using a prop... I did try something like:

<LineChart this.props.interpolation />

But this is not syntactically valid.

Any clue?

Answer 1

"key only props" are actually booleans.

So when you do <Component bezier /> you are just saying the same as <Component bezier={true} /> in a shorter way.

If you want to have it dynamic, you can do something like

const { bezier, interpolation } = this.props;

return <Component bezier={bezier} interpolation={interpolation} />

PS: considering that the values inside props will be booleans.

Answer 2

I have used functional component in which i pass key like that

<LineChart bezier={Your_DATA}/>