将数据目标作为道具传递

Question

我在应用程序中有两个 Bootstrap模式 ，我看到很多人都遇到了问题，无法打开第二个模态..

  

我可以将data-target和modal id属性作为这样的道具传递：

data-target={props.dataTargetID}
id={props.dataTarget}

它仍然显示一个模态，但另一个不显示。

编辑： 模态组件：

const OEModal = (props) => {
  return <div className="d-inline">
    <button type="button" className="btn btn-light btn-sm mt-2" data-toggle="modal" data-target={props.dataTargetID}>
  {props.name}
</button>
    <div className="modal fade" id={props.dataTarget} tabIndex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div className="modal-dialog" role="document">
    <div className="modal-content">
      <div className="modal-header">
        <h5 className="modal-title" id="exampleModalLabel">{props.title}</h5>
        <button type="button" className="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div className="modal-body">
        <form>
          <div className="form-group">
            <label htmlFor="recipient-name" className="col-form-label">Recipe:</label>
            <input 
              name="recipeName"
              type="text" 
              value={props.recipeName} 
              onChange={props.handleChange}
              className="form-control"
              id="recipient-name" 
              placeholder="Recipe name"></input>
          </div>
          <div className="form-group">
            <label htmlFor="message-text"  className="col-form-label">Ingredients:</label>
            <textarea 
              value={props.recipeIngredients}
              onChange={props.handleChange}
              className="form-control"
              id="message-text"
              name="recipeIngredients"
              placeholder="Enter ingredients separated by commas..."></textarea>
          </div> 
        </form> 
        <div>
         <button 
            onClick={props.handleSubmit}
            data-dismiss="modal"
            type="button" 
            value="Save"
            className="btn btn-light btn-sm mr-2">Save</button>
        <button type="button" className="btn btn-primary btn-sm">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>
    </div>
}

我正在使用该组件两次，一次用于添加配方和编辑配方：

<OEModal 
        name="Add new recipe"
        recipeName={this.state.recipeName}
        recipeIngredients={this.state.recipeIngredients}
        handleSubmit={this.addRecipe} 
        handleChange={this.handleChange}
        title="Add a recipe"
        dataTarget="addModal"
        dataTargetID="#addModal"
        />

<OEModal 
           name="Edit recipe"
            title="Edit recipe" 
            dataTarget="editModal"
            dataTargetID="#editModal"
            onClick={this.props.handleSubmit}/>